/* Khawaja Family Heritage Network — design system
 *
 * Palette: lapis (manuscript border ink), verdigris (living members),
 * saffron (the configured root, used sparingly), slate paper, night ink,
 * madder (disputed claims and errors).
 * Signature: certainty is drawn in the tree's lines — solid, dashed, dotted,
 * double and hairline — so every link says how sure the family is.
 */

/* Figtree (text, labels, figures) and Source Serif 4 (headings): variable,
   OFL, vendored from @fontsource-variable, as in the Noor project. */
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; 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: "Figtree"; src: url("../fonts/figtree-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; 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: "Cinzel"; src: url("../fonts/cinzel-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; 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: "Source Serif 4"; src: url("../fonts/source-serif-4-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Serif Bengali"; src: url("../fonts/noto-serif-bengali-bengali-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; }
@font-face { font-family: "Noto Serif Bengali"; src: url("../fonts/noto-serif-bengali-bengali-600-normal.woff2") format("woff2"); font-weight: 600 700; font-display: swap; unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("../fonts/noto-naskh-arabic-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("../fonts/noto-naskh-arabic-arabic-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* ---------------------------------------------------------------- tokens */
:root {
  --kf-lapis: #1F3A5F;
  --kf-lapis-deep: #152A46;
  --kf-lapis-tint: #E3EAF3;
  --kf-verdigris: #3E7C6F;
  --kf-verdigris-tint: #E1EFEB;
  --kf-saffron: #C98A1E;
  --kf-saffron-tint: #F7EBD3;
  --kf-paper: #EEF1F3;
  --kf-ink: #141C28;
  --kf-madder: #A33B3B;
  --kf-madder-tint: #F5E3E3;
  /* ornament only (never text): shrine green and illumination gold */
  --kf-emerald: #1E6B4E;
  --kf-gold: #B8892B;
  --kf-gold-soft: rgba(184, 137, 43, .38);

  --kf-bg: var(--kf-paper);
  --kf-surface: #FFFFFF;
  --kf-surface-2: #F6F8F9;
  --kf-text: var(--kf-ink);
  --kf-muted: #556170;
  --kf-line: #D3DAE1;
  --kf-line-strong: #AEB9C5;
  --kf-link: var(--kf-lapis);
  --kf-primary: var(--kf-lapis);
  --kf-primary-contrast: #FFFFFF;
  --kf-focus: var(--kf-saffron);
  --kf-tree-line: var(--kf-lapis);
  --kf-spine: #9AA8B6;

  --kf-font-display: "Source Serif 4", "Noto Serif Bengali", Georgia, "Times New Roman", serif;
  --kf-font-body: "Figtree", "Noto Serif Bengali", "Noto Naskh Arabic", "Segoe UI", system-ui, sans-serif;
  --kf-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --kf-radius: 12px;
  --kf-radius-sm: 8px;
  --kf-shadow: 0 1px 2px rgba(20, 28, 40, .06), 0 4px 16px rgba(20, 28, 40, .05);
  --kf-header-h: 64px;

  /* Bootstrap bridge */
  --bs-body-bg: var(--kf-bg);
  --bs-body-color: var(--kf-text);
  --bs-body-font-family: var(--kf-font-body);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.6;
  --bs-link-color: var(--kf-link);
  --bs-link-color-rgb: 31, 58, 95;
  --bs-link-hover-color: var(--kf-lapis-deep);
  --bs-border-color: var(--kf-line);
  --bs-secondary-color: var(--kf-muted);
  --bs-tertiary-bg: var(--kf-surface-2);
  --bs-emphasis-color: var(--kf-ink);
  --bs-border-radius: var(--kf-radius-sm);
  --bs-border-radius-lg: var(--kf-radius);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kf-bg: #0E141D;
    --kf-surface: #161F2B;
    --kf-surface-2: #1B2634;
    --kf-text: #E5EAF0;
    --kf-muted: #9AA7B6;
    --kf-line: #2A3747;
    --kf-line-strong: #3B4B5E;
    --kf-link: #9DBBE3;
    --kf-primary: #9DBBE3;
    --kf-primary-contrast: #0E141D;
    --kf-lapis-tint: #1E2D42;
    --kf-verdigris: #6FB3A3;
    --kf-verdigris-tint: #18302C;
    --kf-saffron: #E0A443;
    --kf-saffron-tint: #33280F;
    --kf-madder: #E07A7A;
    --kf-madder-tint: #3A1E1F;
    --kf-emerald: #5FBF95;
    --kf-gold: #D9B15A;
    --kf-gold-soft: rgba(217, 177, 90, .32);
    --kf-tree-line: #9DBBE3;
    --kf-spine: #4F6176;
    --kf-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --bs-body-bg: var(--kf-bg);
    --bs-body-color: var(--kf-text);
    --bs-link-color: var(--kf-link);
    --bs-link-color-rgb: 157, 187, 227;
    --bs-link-hover-color: #C3D6EF;
    --bs-border-color: var(--kf-line);
    --bs-secondary-color: var(--kf-muted);
    --bs-tertiary-bg: var(--kf-surface-2);
    --bs-emphasis-color: #F3F6F9;
    --bs-secondary-bg: var(--kf-surface-2);
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --kf-bg: #0E141D;
  --kf-surface: #161F2B;
  --kf-surface-2: #1B2634;
  --kf-text: #E5EAF0;
  --kf-muted: #9AA7B6;
  --kf-line: #2A3747;
  --kf-line-strong: #3B4B5E;
  --kf-link: #9DBBE3;
  --kf-primary: #9DBBE3;
  --kf-primary-contrast: #0E141D;
  --kf-lapis-tint: #1E2D42;
  --kf-verdigris: #6FB3A3;
  --kf-verdigris-tint: #18302C;
  --kf-saffron: #E0A443;
  --kf-saffron-tint: #33280F;
  --kf-madder: #E07A7A;
  --kf-madder-tint: #3A1E1F;
  --kf-emerald: #5FBF95;
  --kf-gold: #D9B15A;
  --kf-gold-soft: rgba(217, 177, 90, .32);
  --kf-tree-line: #9DBBE3;
  --kf-spine: #4F6176;
  --kf-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --bs-body-bg: var(--kf-bg);
  --bs-body-color: var(--kf-text);
  --bs-link-color: var(--kf-link);
  --bs-link-color-rgb: 157, 187, 227;
  --bs-link-hover-color: #C3D6EF;
  --bs-border-color: var(--kf-line);
  --bs-secondary-color: var(--kf-muted);
  --bs-tertiary-bg: var(--kf-surface-2);
  --bs-emphasis-color: #F3F6F9;
  --bs-secondary-bg: var(--kf-surface-2);
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  color-scheme: dark;
}

/* ------------------------------------------------------------- base type */
html, body { overflow-x: clip; }
body {
  background: var(--kf-bg);
  color: var(--kf-text);
  font-family: var(--kf-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3{
  font-family: var(--kf-font-display);
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--bs-emphasis-color);
}
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); line-height: 1.08; }
h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); line-height: 1.2; }
h3 { font-size: 1.3rem; line-height: 1.25; }
h4, h5, h6 { font-family: var(--kf-font-body); font-weight: 700; }
:lang(bn) h1, :lang(bn) h2, :lang(bn) h3 { font-family: "Noto Serif Bengali", var(--kf-font-display); font-weight: 600; letter-spacing: 0; }
[dir="rtl"], .kf-rtl { font-family: "Noto Naskh Arabic", "Segoe UI", var(--kf-font-body); }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { font-family: "Noto Naskh Arabic", var(--kf-font-display); font-weight: 700; letter-spacing: 0; }
:lang(ar) .kf-eyebrow, :lang(bn) .kf-eyebrow { letter-spacing: .02em; text-transform: none; font-family: var(--kf-font-body); font-size: .8rem; }

/* Right-to-left page chrome. The genealogy chart itself stays left-to-right
   (generations read the same way in every language); its labels follow the
   text direction of each name. */
[dir="rtl"] .kf-header-search .form-control { padding-left: .8rem; padding-right: 2.25rem; }
[dir="rtl"] .kf-header-search .kf-icon { left: auto; right: .8rem; }
[dir="rtl"] .kf-dot { right: auto; left: 3px; }
[dir="rtl"] .skip-link { left: auto; right: 1rem; }
[dir="rtl"] .kf-alert--success, [dir="rtl"] .kf-alert--info { border-left-width: 1px; }
[dir="rtl"] .kf-alert--success { border-right: 4px solid var(--kf-verdigris); }

[dir="rtl"] .kf-alert--info { border-right: 4px solid var(--kf-saffron); }
[dir="rtl"] .kf-form-errors, [dir="rtl"] .kf-conflict { border-left: 0; border-right: 4px solid var(--kf-madder); }
[dir="rtl"] .kf-drawer { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--kf-line); transform: translateX(-105%); }
[dir="rtl"] .kf-drawer.is-open { transform: none; }
[dir="rtl"] .kf-drawer-close { right: auto; left: .7rem; }
[dir="rtl"] .shajra-legend { left: auto; right: 1rem; }
.shajra .t-name, .shajra .t-spouses { unicode-bidi: plaintext; }

a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
.kf-mono, code{ font-family: var(--kf-font-mono); font-size: .82em; letter-spacing: .02em; }
.kf-eyebrow {
  font-family: var(--kf-font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kf-muted);
  margin-bottom: .5rem;
  display: block;
}
.kf-lede { font-size: 1.18rem; color: var(--kf-muted); max-width: 40rem; }
.text-muted, .text-body-secondary { color: var(--kf-muted) !important; }
.kf-native { font-family: "Noto Serif Bengali", "Noto Naskh Arabic", var(--kf-font-body); }

/* ---------------------------------------------------------------- focus */
:focus-visible {
  outline: 3px solid var(--kf-focus) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 2000;
  background: var(--kf-ink); color: #fff; padding: .6rem 1rem; border-radius: var(--kf-radius-sm);
}
.skip-link:focus { top: .75rem; }

/* --------------------------------------------------------------- header */
.kf-header {
  position: sticky; top: 0; z-index: 1030;
  background: color-mix(in srgb, var(--kf-bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--kf-line);
}
.kf-header .navbar { min-height: var(--kf-header-h); padding-block: .35rem; }
.kf-brand { display: flex; align-items: center; gap: .65rem; color: var(--bs-emphasis-color); text-decoration: none; }
.kf-brand:hover { color: var(--bs-emphasis-color); }

.kf-brand-name { font-family: var(--kf-font-display); font-size: 1.22rem; line-height: 1; }
@media (max-width: 575.98px) {
  .kf-brand-name { font-size: 1.02rem; }
  .kf-brand-name small { display: none !important; }
  .kf-brand { min-width: 0; flex: 1 1 0; }
  
}
.kf-brand-name small { display: block; font-family: var(--kf-font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--kf-muted); margin-top: .3rem; }
.kf-nav .nav-link {
  color: var(--kf-text); font-weight: 700; font-size: .98rem;
  padding: .5rem .8rem !important; border-radius: var(--kf-radius-sm);
}
.kf-nav .nav-link:hover { background: var(--kf-lapis-tint); }
.kf-nav .nav-link.active { color: var(--kf-primary); box-shadow: inset 0 -2px 0 var(--kf-saffron); border-radius: 0; }
.kf-icon { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; }
.kf-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid transparent;
  color: var(--kf-text); background: transparent;
}
.kf-icon-btn:hover { background: var(--kf-lapis-tint); color: var(--kf-text); }
.kf-dot {
  position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--kf-madder); color: #fff; font: 600 .68rem/18px var(--kf-font-mono);
  text-align: center;
}
.kf-header-search { max-width: 280px; }
.kf-header-search .form-control { border-radius: 999px; padding-left: 2.25rem; background: var(--kf-surface); }
.kf-header-search .kf-icon { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--kf-muted); }
.dropdown-menu { --bs-dropdown-bg: var(--kf-surface); --bs-dropdown-border-color: var(--kf-line); --bs-dropdown-link-color: var(--kf-text); --bs-dropdown-link-hover-bg: var(--kf-lapis-tint); --bs-dropdown-link-active-bg: var(--kf-primary); box-shadow: var(--kf-shadow); }

/* ----------------------------------------------------------- page frame */
.kf-main { min-height: calc(100vh - var(--kf-header-h) - 180px); padding-block: 2.25rem 4rem; }
.kf-main--flush { padding: 0; }

.kf-card {
  background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: var(--kf-radius);
  padding: 1.4rem 1.5rem;
}
.kf-card + .kf-card { margin-top: 1.25rem; }
.kf-card > h2:first-child, .kf-card > h3:first-child, .kf-card > .kf-eyebrow:first-child { margin-top: 0; }
.kf-card--flush { padding: 0; overflow: hidden; }
.kf-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.kf-card-head h2, .kf-card-head h3 { margin: 0; font-size: 1.25rem; }
.kf-rule { border: 0; border-top: 1px solid var(--kf-line); margin: 1.5rem 0; opacity: 1; }

.kf-list { list-style: none; padding: 0; margin: 0; }
.kf-list > li { padding: .85rem 0; border-top: 1px solid var(--kf-line); }
.kf-list > li:first-child { border-top: 0; padding-top: 0; }
.kf-list > li:last-child { padding-bottom: 0; }

.kf-dl { display: grid; grid-template-columns: minmax(8rem, 34%) 1fr; gap: .55rem 1rem; margin: 0; }
.kf-dl dt { font-weight: 400; color: var(--kf-muted); font-size: .94rem; }
.kf-dl dd { margin: 0; }
@media (max-width: 575.98px) { .kf-dl { grid-template-columns: 1fr; gap: .1rem; } .kf-dl dd { margin-bottom: .6rem; } }

.kf-empty {
  border: 1px dashed var(--kf-line-strong); border-radius: var(--kf-radius); padding: 2rem 1.5rem; text-align: center;
  color: var(--kf-muted); background: var(--kf-surface);
}
.kf-empty strong { display: block; color: var(--kf-text); font-size: 1.05rem; margin-bottom: .35rem; }

/* --------------------------------------------------------------- buttons */
.btn { font-weight: 700; border-radius: var(--kf-radius-sm); padding: .55rem 1.05rem; }
.btn-sm { padding: .3rem .7rem; font-size: .9rem; }
.btn-primary {
  --bs-btn-bg: var(--kf-primary); --bs-btn-border-color: var(--kf-primary); --bs-btn-color: var(--kf-primary-contrast);
  --bs-btn-hover-bg: var(--kf-lapis-deep); --bs-btn-hover-border-color: var(--kf-lapis-deep); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--kf-lapis-deep); --bs-btn-active-border-color: var(--kf-lapis-deep);
  --bs-btn-disabled-bg: var(--kf-primary); --bs-btn-disabled-border-color: var(--kf-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--kf-primary); --bs-btn-border-color: var(--kf-line-strong);
  --bs-btn-hover-bg: var(--kf-lapis-tint); --bs-btn-hover-color: var(--kf-primary); --bs-btn-hover-border-color: var(--kf-primary);
  --bs-btn-active-bg: var(--kf-lapis-tint); --bs-btn-active-color: var(--kf-primary); --bs-btn-active-border-color: var(--kf-primary);
}
.btn-quiet { --bs-btn-color: var(--kf-text); --bs-btn-hover-bg: var(--kf-lapis-tint); --bs-btn-hover-color: var(--kf-text); --bs-btn-active-bg: var(--kf-lapis-tint); }
.btn-danger { --bs-btn-bg: var(--kf-madder); --bs-btn-border-color: var(--kf-madder); --bs-btn-hover-bg: #8A2F2F; --bs-btn-hover-border-color: #8A2F2F; }
.btn-success { --bs-btn-bg: var(--kf-verdigris); --bs-btn-border-color: var(--kf-verdigris); --bs-btn-hover-bg: #336A5E; --bs-btn-hover-border-color: #336A5E; }

/* ----------------------------------------------------------------- forms */
.form-control, .form-select {
  background-color: var(--kf-surface); border-color: var(--kf-line-strong); color: var(--kf-text);
  padding: .6rem .8rem; border-radius: var(--kf-radius-sm);
}
.form-select { padding-right: 2.25rem; }
.form-select-sm { padding-right: 2rem; }
.form-control:focus, .form-select:focus { border-color: var(--kf-primary); background-color: var(--kf-surface); color: var(--kf-text); }
.form-label { font-weight: 700; margin-bottom: .3rem; }
.form-text { color: var(--kf-muted); font-size: .88rem; }
.form-check-input:checked { background-color: var(--kf-primary); border-color: var(--kf-primary); }
.kf-field { margin-bottom: 1.15rem; }
.kf-field .invalid-feedback { display: block; color: var(--kf-madder); font-weight: 700; }
.kf-field.is-invalid .form-control, .kf-field.is-invalid .form-select { border-color: var(--kf-madder); }
.kf-form-errors { border-left: 4px solid var(--kf-madder); background: var(--kf-madder-tint); padding: .8rem 1rem; border-radius: var(--kf-radius-sm); margin-bottom: 1.25rem; }
.kf-fieldset { border: 0; padding: 0; margin: 0 0 1.75rem; }
.kf-fieldset legend { font-family: var(--kf-font-display); font-size: 1.25rem; margin-bottom: .9rem; }
.kf-form-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.5rem; }

/* ------------------------------------------------------- alerts & chips */

.kf-alert { border-radius: var(--kf-radius-sm); border: 1px solid var(--kf-line); background: var(--kf-surface); padding: .8rem 1rem; display: flex; gap: .7rem; align-items: start; }
.kf-alert--success { border-left: 4px solid var(--kf-verdigris); }

.kf-alert--info { border-left: 4px solid var(--kf-saffron); }
.kf-banner { background: var(--kf-saffron-tint); border: 1px solid color-mix(in srgb, var(--kf-saffron) 45%, transparent); border-radius: var(--kf-radius-sm); padding: .7rem 1rem; font-size: .95rem; }

.kf-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--kf-font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--kf-line-strong); color: var(--kf-muted); background: var(--kf-surface);
  white-space: nowrap;
}
.kf-chip--ok { color: var(--kf-verdigris); border-color: color-mix(in srgb, var(--kf-verdigris) 50%, transparent); background: var(--kf-verdigris-tint); }
.kf-chip--warn { color: #8A5A0B; border-color: color-mix(in srgb, var(--kf-saffron) 55%, transparent); background: var(--kf-saffron-tint); }
.kf-chip--bad { color: var(--kf-madder); border-color: color-mix(in srgb, var(--kf-madder) 50%, transparent); background: var(--kf-madder-tint); }
.kf-chip--info { color: var(--kf-primary); border-color: color-mix(in srgb, var(--kf-primary) 40%, transparent); background: var(--kf-lapis-tint); }
:root[data-theme="dark"] .kf-chip--warn, :root[data-theme="dark"] .t-node--root .t-flag { color: var(--kf-saffron); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kf-chip--warn, :root:not([data-theme="light"]) .t-node--root .t-flag { color: var(--kf-saffron); } }

/* Certainty: the line sample is the same stroke the tree draws. */
.kf-cert { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--kf-muted); white-space: nowrap; }
.kf-cert::before { content: ""; width: 28px; flex: none; border-top: 2px solid var(--kf-tree-line); }
.kf-cert[data-c="reported"]::before { border-top-style: dashed; }
.kf-cert[data-c="estimated"]::before { border-top-style: dotted; border-top-width: 3px; }
.kf-cert[data-c="disputed"]::before { border-top: 5px double var(--kf-madder); }
.kf-cert[data-c="unverified"]::before { border-top: 1px solid var(--kf-spine); }
.kf-cert[data-c="disputed"] { color: var(--kf-madder); }

/* ------------------------------------------------------------- avatars */
.kf-avatar {
  --size: 44px;
  width: var(--size); height: var(--size); flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--kf-lapis-tint); color: var(--kf-primary);
  font: 400 calc(var(--size) * .4)/1 var(--kf-font-display);
  border: 1px solid var(--kf-line);
}
.kf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kf-avatar--living { background: var(--kf-verdigris-tint); color: var(--kf-verdigris); }
.kf-avatar--lg { --size: 96px; }
.kf-avatar--sm { --size: 32px; }

/* ---------------------------------------------------------------- landing */

.kf-legend-card { background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: var(--kf-radius); padding: 1.5rem 1.6rem; }
.kf-legend-card h2 { font-size: 1.35rem; margin-bottom: .35rem; }
.kf-legend { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .1rem; }
.kf-legend li { display: grid; grid-template-columns: 76px 1fr; gap: 1rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--kf-line); }
.kf-legend li:first-child { border-top: 0; }
.kf-legend .kf-stroke { height: 0; border-top: 2px solid var(--kf-tree-line); }
.kf-legend .kf-stroke[data-c="reported"] { border-top-style: dashed; }
.kf-legend .kf-stroke[data-c="estimated"] { border-top-style: dotted; border-top-width: 3px; }
.kf-legend .kf-stroke[data-c="disputed"] { border-top: 5px double var(--kf-madder); }
.kf-legend .kf-stroke[data-c="unverified"] { border-top: 1px solid var(--kf-spine); }
.kf-legend b { display: block; font-size: .98rem; }
.kf-legend span { display: block; font-size: .88rem; color: var(--kf-muted); line-height: 1.4; }
.kf-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.kf-steps li { counter-increment: step; border-top: 2px solid var(--kf-primary); padding-top: 1rem; }
.kf-steps li::before { content: counter(step); font-family: var(--kf-font-display); font-size: 1.6rem; color: var(--kf-saffron); display: block; line-height: 1; margin-bottom: .5rem; }
.kf-steps h3 { font-family: var(--kf-font-body); font-weight: 700; font-size: 1.05rem; margin-bottom: .3rem; }
.kf-steps p { color: var(--kf-muted); margin: 0; font-size: .96rem; }
.kf-section { padding-block: 3rem; border-top: 1px solid var(--kf-line); }

/* ================================================================ SHAJRA
 * The tree: nested lists laid out left → right by generation. Each <li>
 * draws its own incoming link (::before) in the style of its certainty; the
 * vertical spine (::after) belongs to the parent and stays neutral.
 */
.shajra-shell { display: grid; grid-template-columns: 1fr; position: relative; height: calc(100vh - var(--kf-header-h)); height: calc(100dvh - var(--kf-header-h)); }
.shajra-bar {
  display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between;
  padding: .7rem 1.25rem; border-bottom: 1px solid var(--kf-line); background: var(--kf-surface);
}
.shajra-bar h1 { font-size: 1.35rem; margin: 0; }
.shajra-bar .kf-eyebrow { margin: 0 0 .1rem; }
.shajra-controls { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.shajra-controls .btn { padding: .35rem .65rem; }
.shajra-viewport {
  position: relative; overflow: hidden; cursor: grab; touch-action: none; outline: none;
  background-color: var(--kf-bg);
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--kf-spine) 45%, transparent) 1px, transparent 0);
  background-size: 22px 22px;
}
.shajra-viewport:focus-visible { outline-offset: -3px; }
.shajra-viewport.is-panning { cursor: grabbing; }
.shajra-canvas {
  --node-w: 232px; --link: 34px; --gen-step: calc(var(--node-w) + var(--link) * 2);
  position: absolute; left: 0; top: 0; transform-origin: 0 0; padding: 64px 48px 96px; will-change: transform;
}
.shajra-ruler { position: absolute; top: 18px; left: 48px; display: flex; pointer-events: none; }
.shajra-ruler span {
  width: var(--gen-step); flex: none; font-family: var(--kf-font-mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--kf-muted); border-left: 1px solid var(--kf-line-strong); padding-left: .5rem;
}

.shajra { list-style: none; margin: 0; padding: 0; }
.shajra-legend { position: absolute; left: 1rem; bottom: 1rem; z-index: 5; max-width: 300px; padding: .6rem .9rem; box-shadow: var(--kf-shadow); }
.shajra-legend summary { cursor: pointer; margin: 0; list-style-position: inside; }
.shajra ul { list-style: none; margin: 0; padding: 0 0 0 var(--link); position: relative; display: flex; flex-direction: column; }
.shajra li { position: relative; display: flex; align-items: center; padding: 7px 0 7px var(--link); }
.shajra > li { padding-left: 0; }
/* stub from the parent's node to the spine */
.shajra ul::before { content: ""; position: absolute; left: 0; top: 50%; width: var(--link); border-top: 2px solid var(--kf-spine); }
/* spine */
.shajra ul > li::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid var(--kf-spine); }
.shajra ul > li:first-child::after { top: 50%; }
.shajra ul > li:last-child::after { bottom: 50%; }
.shajra ul > li:only-child::after { display: none; }
/* the incoming link, styled by certainty */
.shajra ul > li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: var(--link);
  border-top: 2px solid var(--kf-tree-line); transform: translateY(-1px);
}
.shajra li[data-c="reported"]::before { border-top-style: dashed; }
.shajra li[data-c="estimated"]::before { border-top-style: dotted; border-top-width: 3px; }
.shajra li[data-c="disputed"]::before { border-top: 5px double var(--kf-madder); transform: translateY(-2px); }
.shajra li[data-c="unverified"]::before { border-top: 1px solid var(--kf-spine); }
.shajra ul[hidden] { display: none; }

.t-node {
  position: relative; width: var(--node-w); flex: none;
  display: grid; grid-template-columns: auto 1fr; gap: .2rem .7rem; align-items: center;
  background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: 10px;
  padding: .6rem 2.2rem .6rem .7rem; box-shadow: var(--kf-shadow);
  transition: border-color .15s ease, transform .15s ease;
}
.t-node:hover { border-color: var(--kf-line-strong); }
.t-node.is-selected { border-color: var(--kf-primary); box-shadow: 0 0 0 3px var(--kf-lapis-tint); }
.t-node .kf-avatar { --size: 36px; grid-row: span 2; }
.t-name {
  font-weight: 700; font-size: .95rem; line-height: 1.2; color: var(--kf-text); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.t-name::after { content: ""; position: absolute; inset: 0; border-radius: 10px; } /* whole card is the link target */
.t-name:focus-visible { outline: none !important; }
.t-node:has(.t-name:focus-visible) { outline: 3px solid var(--kf-focus); outline-offset: 2px; }
.t-meta { font-family: var(--kf-font-mono); font-size: .7rem; color: var(--kf-muted); letter-spacing: .02em; line-height: 1.45; }
.t-spouses { grid-column: 1 / -1; font-size: .78rem; color: var(--kf-muted); border-top: 1px dashed var(--kf-line); padding-top: .35rem; margin-top: .2rem; line-height: 1.35; }
.t-spouses span::before { content: "∞ "; color: var(--kf-saffron); }
.t-flag { position: absolute; top: -9px; left: 10px; font-family: var(--kf-font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; background: var(--kf-surface); border: 1px solid var(--kf-line); color: var(--kf-muted); }
.t-node--root { border: 2px solid var(--kf-saffron); }
.t-node--root .t-flag { border-color: var(--kf-saffron); color: #8A5A0B; background: var(--kf-saffron-tint); }
.t-node--disputed .t-flag { color: var(--kf-madder); border-color: var(--kf-madder); }
.t-node--draft { border-style: dashed; }
.t-toggle {
  position: absolute; right: -14px; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--kf-line-strong); background: var(--kf-surface);
  color: var(--kf-primary); display: inline-flex; align-items: center; justify-content: center; padding: 0;
  font: 500 .95rem/1 var(--kf-font-mono);
}
.t-toggle:hover { background: var(--kf-lapis-tint); border-color: var(--kf-primary); }
.t-toggle[aria-expanded="true"] { background: var(--kf-primary); color: var(--kf-primary-contrast); border-color: var(--kf-primary); }
.t-toggle[aria-busy="true"] { opacity: .6; cursor: progress; }
.t-toggle .kf-icon { width: 14px; height: 14px; transition: transform .15s ease; }
.t-toggle[aria-expanded="true"] .kf-icon { transform: rotate(180deg); }
.t-error { font-size: .85rem; color: var(--kf-madder); padding: .4rem 0 .4rem var(--link); }

/* Narrow screens: a navigable vertical tree instead of a shrunken one. */
@media (max-width: 767.98px) {
  .shajra-viewport { overflow: auto; cursor: auto; touch-action: auto; background-image: none; }
  .shajra-canvas { position: static; transform: none !important; padding: 1rem 16px 6rem; }
  .shajra-ruler, .shajra-zoom { display: none !important; }
  .shajra-canvas { --node-w: 100%; --link: 18px; }
  .shajra-legend { position: static; margin: 0 16px 1rem; max-width: none; }
  .shajra ul { display: block; padding-left: 14px; margin-left: 17px; }
  .shajra ul::before { display: none; }
  .shajra li { display: block; padding: 6px 0 6px var(--link); }
  .shajra > li { padding-left: 0; }
  .shajra ul > li::after { top: 0; bottom: 0; }
  .shajra ul > li:first-child::after { top: 0; }
  .shajra ul > li:last-child::after { bottom: auto; height: 32px; }
  .shajra ul > li:only-child::after { display: block; }
  .shajra ul > li::before { top: 32px; }
  .t-node { width: 100%; }
  .t-toggle { right: 8px; top: 30px; transform: none; }
  .t-toggle .kf-icon { transform: rotate(90deg); }
  .t-toggle[aria-expanded="true"] .kf-icon { transform: rotate(-90deg); }
}

/* Person card drawer (desktop: side panel; mobile: bottom sheet) */
.kf-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 100%); z-index: 20;
  background: var(--kf-surface); border-left: 1px solid var(--kf-line); box-shadow: -8px 0 30px rgba(20, 28, 40, .08);
  overflow-y: auto; padding: 1.25rem 1.4rem 2rem; transform: translateX(105%); transition: transform .22s ease;
  visibility: hidden;
}
.kf-drawer.is-open { transform: none; visibility: visible; }
.kf-drawer-close { position: absolute; top: .7rem; right: .7rem; }
@media (max-width: 767.98px) {
  .kf-drawer { position: fixed; top: auto; left: 0; right: 0; width: 100%; max-height: 78vh; border-left: 0; border-top: 1px solid var(--kf-line); border-radius: 16px 16px 0 0; transform: translateY(105%); }
}
.kf-pcard h2 { font-size: 1.5rem; margin: .2rem 0 .25rem; padding-right: 2rem; }
.kf-pcard .kf-native { font-size: 1.05rem; color: var(--kf-muted); }
.kf-pcard-links { display: grid; gap: .5rem; margin-top: 1.25rem; }
.kf-mini-people { list-style: none; padding: 0; margin: .3rem 0 0; }
.kf-mini-people li { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem 0; border-top: 1px solid var(--kf-line); font-size: .95rem; }
.kf-mini-people li:first-child { border-top: 0; }

/* ------------------------------------------------------------- profile */

.kf-lifespan { font-family: var(--kf-font-mono); color: var(--kf-muted); font-size: .9rem; }

.kf-person-row { display: flex; gap: .7rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--kf-line); }
.kf-person-row:first-of-type { border-top: 0; }
.kf-person-row a { font-weight: 700; text-decoration: none; }
.kf-person-row a:hover { text-decoration: underline; }
.kf-person-row small { display: block; color: var(--kf-muted); font-size: .82rem; }
.kf-claims { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kf-claim { border: 1px solid var(--kf-line); border-radius: var(--kf-radius-sm); padding: .8rem .9rem; background: var(--kf-surface-2); }
.kf-claim q { display: block; font-style: italic; margin: .3rem 0; quotes: "“" "”"; }
.kf-conflict { border-left: 4px solid var(--kf-madder); }
.kf-meter { height: 6px; background: var(--kf-line); border-radius: 3px; overflow: hidden; }
.kf-meter > span { display: block; height: 100%; background: var(--kf-verdigris); }

/* ----------------------------------------------------------- directory */

.kf-filters { background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: var(--kf-radius); padding: 1.1rem; }
.kf-filters .form-label { font-size: .9rem; }
.kf-filters .kf-optional { display: none; }

/* ------------------------------------------------------------- tables */
.table { --bs-table-bg: transparent; --bs-table-color: var(--kf-text); --bs-table-border-color: var(--kf-line); --bs-table-hover-bg: var(--kf-surface-2); margin: 0; }
.table > :not(caption) > * > * { padding: .7rem .8rem; }
.table thead th { font-family: var(--kf-font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--kf-muted); font-weight: 500; border-bottom-width: 1px; }
.kf-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ----------------------------------------------------------- campaigns */

.kf-money { font-family: var(--kf-font-display); font-size: 1.6rem; line-height: 1.1; }
.kf-money small { font-family: var(--kf-font-mono); font-size: .75rem; letter-spacing: .08em; color: var(--kf-muted); margin-left: .25rem; }
.kf-sandbox { border: 2px dashed var(--kf-saffron); background: var(--kf-saffron-tint); border-radius: var(--kf-radius); padding: 1rem 1.2rem; }
.kf-receipt { max-width: 640px; margin-inline: auto; }

/* ---------------------------------------------------------- place picker */
.kf-place { display: grid; gap: .6rem 1rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.kf-place .form-label { color: var(--kf-muted); font-weight: 700; margin-bottom: .2rem; }

/* ----------------------------------------------------------- dashboard */
.kf-tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kf-tile { display: block; background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: var(--kf-radius); padding: 1.1rem 1.2rem; text-decoration: none; color: var(--kf-text); }
.kf-tile:hover { border-color: var(--kf-primary); color: var(--kf-text); }
.kf-tile b { font-family: var(--kf-font-display); font-weight: 400; font-size: 2rem; display: block; line-height: 1.1; }
.kf-tile span { color: var(--kf-muted); font-size: .92rem; }

/* ---------------------------------------------------------- pagination */
.pagination { --bs-pagination-bg: var(--kf-surface); --bs-pagination-color: var(--kf-primary); --bs-pagination-border-color: var(--kf-line); --bs-pagination-active-bg: var(--kf-primary); --bs-pagination-active-border-color: var(--kf-primary); --bs-pagination-hover-bg: var(--kf-lapis-tint); --bs-pagination-disabled-bg: var(--kf-surface-2); }

/* -------------------------------------------------------------- footer */
.kf-footer { border-top: 1px solid var(--kf-line); padding: 2.5rem 0 3rem; color: var(--kf-muted); font-size: .92rem; background: var(--kf-surface); }
.kf-footer a { color: var(--kf-text); }
.kf-footer .kf-brand-name { color: var(--kf-text); }

/* ---------------------------------------------------------- utilities */
.kf-prose { max-width: 44rem; }
.kf-prose p, .kf-prose li { line-height: 1.7; }
.kf-stack > * + * { margin-top: 1.25rem; }
.kf-sticky { position: sticky; top: calc(var(--kf-header-h) + 1rem); }
.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .kf-header, .kf-footer, .shajra-bar .shajra-controls, .t-toggle, .kf-drawer, .btn, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .shajra-shell { height: auto; }
  .shajra-viewport { overflow: visible; background: none; }
  .shajra-canvas { position: static; transform: none !important; }
  .t-node { box-shadow: none; break-inside: avoid; }
  .kf-card { border-color: #999; }
  .kf-eyebrow::before, .kf-footer::before, .kf-ol-fold { display: none !important; }
  .kf-outline ul[hidden] { display: block !important; }
}

/* ================================================================ INSIGHTS
 * Data colours. Branches use a validated categorical order (fixed by branch
 * id, so a branch keeps its colour everywhere); certainty is one ordinal
 * lapis ramp with madder reserved for "disputed". Dark mode has its own
 * steps, not an automatic flip.
 */
:root {
  --kf-b0: #2a78d6; --kf-b1: #eb6834; --kf-b2: #1baf7a; --kf-b3: #eda100;
  --kf-b4: #e87ba4; --kf-b5: #008300; --kf-b6: #6250d6; --kf-bo: #8C97A4;
  --kf-c-documented: #1f3a5f; --kf-c-reported: #2f5e96; --kf-c-estimated: #5a88c4; --kf-c-unverified: #86a9d6;
  --kf-v-living: var(--kf-verdigris); --kf-v-deceased: #5E6C7C; --kf-v-unknown: #B9C3CE;
  --kf-v-gen: var(--kf-lapis); --kf-v-birth: var(--kf-saffron);
  --kf-band: color-mix(in srgb, var(--kf-lapis) 4.5%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kf-b0: #3987e5; --kf-b1: #d95926; --kf-b2: #199e70; --kf-b3: #c98500;
    --kf-b4: #d55181; --kf-b5: #008300; --kf-b6: #9085e9; --kf-bo: #6C7A8B;
    --kf-c-documented: #c3d6ef; --kf-c-reported: #8fb2e0; --kf-c-estimated: #5a88c4; --kf-c-unverified: #3a6aa8;
    --kf-v-deceased: #8D9BAC; --kf-v-unknown: #3B4B5E; --kf-v-gen: #8fb2e0;
    --kf-band: rgba(157, 187, 227, .045);
  }
}
:root[data-theme="dark"] {
  --kf-b0: #3987e5; --kf-b1: #d95926; --kf-b2: #199e70; --kf-b3: #c98500;
  --kf-b4: #d55181; --kf-b5: #008300; --kf-b6: #9085e9; --kf-bo: #6C7A8B;
  --kf-c-documented: #c3d6ef; --kf-c-reported: #8fb2e0; --kf-c-estimated: #5a88c4; --kf-c-unverified: #3a6aa8;
  --kf-v-deceased: #8D9BAC; --kf-v-unknown: #3B4B5E; --kf-v-gen: #8fb2e0;
  --kf-band: rgba(157, 187, 227, .045);
}
.br-0 { --bc: var(--kf-b0); } .br-1 { --bc: var(--kf-b1); } .br-2 { --bc: var(--kf-b2); } .br-3 { --bc: var(--kf-b3); }
.br-4 { --bc: var(--kf-b4); } .br-5 { --bc: var(--kf-b5); } .br-6 { --bc: var(--kf-b6); }
.br-other { --bc: var(--kf-bo); } .br-none { --bc: var(--kf-v-unknown); }

/* -- layout: tree + insights rail */
.shajra-shell.has-insights { grid-template-columns: minmax(0, 1fr) 360px; }
.shajra-shell.is-rail-closed { grid-template-columns: minmax(0, 1fr) 0; }
.shajra-shell.is-rail-closed .shajra-rail { visibility: hidden; }
.shajra-main { display: grid; grid-template-rows: auto 1fr; min-height: 0; min-width: 0; }
.shajra-rail { min-height: 0; overflow: hidden; border-inline-start: 1px solid var(--kf-line); background: var(--kf-surface); }
.shajra-rail-btn { display: inline-flex; align-items: center; gap: .35rem; }
.shajra-rail-btn[aria-expanded="true"] { background: var(--kf-lapis-tint); }
/* the thread under the bar is woven from the branch colours */
.shajra-bar { position: relative; }
.shajra-bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, var(--kf-b0) 0 14.28%, var(--kf-b1) 0 28.57%, var(--kf-b2) 0 42.85%, var(--kf-b3) 0 57.14%,
    var(--kf-b4) 0 71.42%, var(--kf-b5) 0 85.71%, var(--kf-b6) 0);
  opacity: .85;
}

.shajra-insights {
  position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.1rem 1.25rem 2rem; scrollbar-width: thin;
}
.ins-head { padding-bottom: 1rem; border-bottom: 1px solid var(--kf-line); }
.ins-head .kf-eyebrow { margin: 0; }
.ins-hero { display: flex; align-items: baseline; gap: .6rem; margin: .2rem 0 .8rem; }
.ins-hero b { font: 800 3.28rem/.9 var(--kf-font-figure); letter-spacing: 0; color: var(--bs-emphasis-color); }
.ins-hero span { font-size: .92rem; color: var(--kf-muted); line-height: 1.3; max-width: 14ch; }
.ins-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ins-tiles li { background: var(--kf-surface-2); border: 1px solid var(--kf-line); border-radius: var(--kf-radius-sm); padding: .5rem .6rem; }
.ins-tiles b { display: block; font: 800 1.39rem/1.05 var(--kf-font-figure); color: var(--bs-emphasis-color); }
.ins-tiles span { font-size: .76rem; color: var(--kf-muted); }
.ins-block { padding: 1.1rem 0 .3rem; border-bottom: 1px solid var(--kf-line); }
.ins-block:last-of-type { border-bottom: 0; }
.ins-block h3 { font: 700 1.06rem/1.15 var(--kf-font-label); letter-spacing: .01em; margin: 0; color: var(--kf-text); }
.ins-sub { font-size: .8rem; color: var(--kf-muted); margin: .15rem 0 .6rem; }
.ins-note { font-size: .76rem; color: var(--kf-muted); margin: .4rem 0 0; }

.ins-svg { display: block; width: 100%; height: auto; overflow: visible; direction: ltr; }
.ins-svg text { font-family: var(--kf-font-body); }
.ins-axis { stroke: var(--kf-line-strong); stroke-width: 1; shape-rendering: crispEdges; }
.ins-hit { fill: transparent; }
.ins-col--gen { fill: var(--kf-v-gen); }
.ins-col--birth { fill: var(--kf-v-birth); }
.ins-val { fill: var(--kf-text); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ins-svg .ins-tick { fill: var(--kf-muted); font-size: 10px; font-family: var(--kf-font-mono); font-variant-numeric: tabular-nums; }
.ins-label { fill: var(--kf-text); font-size: 12px; }
.ins-bar { fill: var(--bc); }
.ins-mark { outline: none; cursor: default; }
.ins-mark path, .ins-mark rect.ins-seg { transition: opacity .12s ease; }
.ins-svg:has(.ins-mark:hover) .ins-mark:not(:hover) :is(path, .ins-seg),
.ins-svg:has(.ins-mark:focus-visible) .ins-mark:not(:focus-visible) :is(path, .ins-seg) { opacity: .45; }
.ins-mark:focus-visible .ins-hit, .ins-mark:focus-visible .ins-seg, .ins-mark:focus-visible .ins-bar { stroke: var(--kf-focus); stroke-width: 2; }
.cert-documented { --vc: var(--kf-c-documented); } .cert-reported { --vc: var(--kf-c-reported); }
.cert-estimated { --vc: var(--kf-c-estimated); } .cert-unverified { --vc: var(--kf-c-unverified); }
.cert-disputed { --vc: var(--kf-madder); }
.life-living { --vc: var(--kf-v-living); } .life-deceased { --vc: var(--kf-v-deceased); } .life-unknown { --vc: var(--kf-v-unknown); }
.ins-seg { fill: var(--vc); }

.ins-legend { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: .84rem; }
.ins-legend li { display: flex; align-items: center; gap: .5rem; }
.ins-legend li.is-empty { opacity: .55; }
.ins-legend .ins-num { margin-inline-start: auto; }
.ins-legend--row { grid-template-columns: repeat(3, auto); justify-content: start; gap: .3rem 1rem; }
.ins-legend--row .ins-num { margin-inline-start: .25rem; }
.ins-legend-line { font-size: .84rem; color: var(--kf-text); }
.ins-legend-line::before { width: 20px; }
.ins-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--vc); flex: none; }
.ins-num { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--kf-text); white-space: nowrap; }
.ins-num small { font-weight: 400; color: var(--kf-muted); margin-inline-start: .2rem; }
.ins-top { margin: .5rem 0 0; padding-inline-start: 1.2rem; display: grid; gap: .35rem; font-size: .9rem; }
.ins-top li { display: flex; justify-content: space-between; gap: .75rem; }
.ins-top li::marker { color: var(--kf-muted); font-family: var(--kf-font-mono); font-size: .8rem; }
.ins-table summary { cursor: pointer; font-size: .86rem; font-weight: 700; color: var(--kf-link); }
.ins-table table { font-size: .82rem; margin: .7rem 0 0; }
.ins-table caption { caption-side: top; font-weight: 700; color: var(--kf-text); padding: .2rem 0; }
.ins-table .kf-num { text-align: end; font-variant-numeric: tabular-nums; }
.ins-tooltip {
  position: absolute; z-index: 10; pointer-events: none; transform: translate(-50%, calc(-100% - 8px));
  background: var(--kf-ink); color: #fff; font-size: .8rem; font-weight: 600; line-height: 1.3;
  padding: .35rem .55rem; border-radius: 6px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
:root[data-theme="dark"] .ins-tooltip { background: #E5EAF0; color: #0E141D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ins-tooltip { background: #E5EAF0; color: #0E141D; } }

/* -- the tree, coloured by branch */
.t-node[class*="t-node--b"] { box-shadow: inset 4px 0 0 var(--bc), var(--kf-shadow); padding-left: .95rem; }
.t-node--b0 { --bc: var(--kf-b0); } .t-node--b1 { --bc: var(--kf-b1); } .t-node--b2 { --bc: var(--kf-b2); }
.t-node--b3 { --bc: var(--kf-b3); } .t-node--b4 { --bc: var(--kf-b4); } .t-node--b5 { --bc: var(--kf-b5); }
.t-node--b6 { --bc: var(--kf-b6); } .t-node--bo { --bc: var(--kf-bo); }
.t-node[class*="t-node--b"] .kf-avatar { box-shadow: 0 0 0 2px var(--kf-surface), 0 0 0 4px var(--bc); }
.t-node--root { box-shadow: 0 0 0 5px color-mix(in srgb, var(--kf-saffron) 22%, transparent), 0 10px 30px color-mix(in srgb, var(--kf-saffron) 28%, transparent); }
.t-node--root[class*="t-node--b"] { box-shadow: inset 4px 0 0 var(--bc), 0 0 0 5px color-mix(in srgb, var(--kf-saffron) 22%, transparent), 0 10px 30px color-mix(in srgb, var(--kf-saffron) 28%, transparent); }
.t-node.is-focus:not(.t-node--root) { border-color: var(--kf-primary); }
.shajra-branch-key { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; font-size: .84rem; }
.shajra-branch-key li { display: flex; align-items: center; gap: .45rem; }
.br-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--bc); flex: none; }

/* -- generation bands: the ruler columns run the full height of the canvas */
.shajra-ruler { top: 0; bottom: 0; z-index: 0; }
.shajra-ruler span { height: 100%; padding-top: 18px; display: flex; flex-direction: column; gap: .2rem; }
.shajra-ruler span:nth-child(even) { background: var(--kf-band); }
.shajra-ruler span b { font: 800 1.02rem/1 var(--kf-font-figure); letter-spacing: 0; text-transform: none; color: var(--kf-text); }
.shajra { position: relative; z-index: 1; }

@media (max-width: 1199.98px) {
  .shajra-shell.has-insights, .shajra-shell.is-rail-closed { grid-template-columns: minmax(0, 1fr); overflow: clip; }
  .shajra-rail {
    position: absolute; top: 0; bottom: 0; right: 0; width: min(380px, 100%); z-index: 30;
    box-shadow: -12px 0 32px rgba(20, 28, 40, .18); transform: translateX(105%); transition: transform .2s ease;
  }
  [dir="rtl"] .shajra-rail { right: auto; left: 0; transform: translateX(-105%); }
  .shajra-shell.is-rail-open .shajra-rail { transform: none; }
  .shajra-shell:not(.is-rail-open) .shajra-rail { visibility: hidden; }
}
@media (max-width: 767.98px) {
  .shajra-rail-btn span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .shajra-rail, .ins-mark path, .ins-mark rect { transition: none; } }
@media print { .shajra-rail { display: none !important; } .shajra-shell.has-insights { grid-template-columns: 1fr; } }

/* ================================================================ TYPE ROLES
 * As in Noor: Source Serif 4 for page titles and the wordmark, Figtree for
 * section headings, labels and figures (bold, fixed-width digits), IBM Plex
 * Mono for codes. None carry Bangla or Arabic, so the Noto faces follow.
 */
:root {
  --kf-font-figure: "Figtree", "Segoe UI", system-ui, sans-serif;
  --kf-font-label: "Figtree", "Segoe UI", system-ui, sans-serif;
  --kf-font-script: "Source Serif 4", Georgia, serif;
}
h1 { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.8rem); font-weight: 600; line-height: 1.12; letter-spacing: -.015em; }
h2 { font-family: var(--kf-font-label); font-weight: 700; font-size: clamp(1.35rem, 1.2rem + .6vw, 1.65rem); line-height: 1.2; letter-spacing: -.01em; }
h3 { font-family: var(--kf-font-label); font-weight: 700; font-size: 1.15rem; line-height: 1.3; letter-spacing: -.005em; }
.kf-eyebrow { font-family: var(--kf-font-label); font-weight: 700; font-size: .74rem; letter-spacing: .12em; }
.kf-brand-name { font-family: var(--kf-font-script); font-weight: 600; font-size: 1.3rem; letter-spacing: -.01em; }

.kf-steps li::before { font-family: var(--kf-font-figure); font-weight: 800; font-size: 1.8rem; }
.kf-card-head h2, .kf-card-head h3 { font-size: 1.2rem; }
.kf-fieldset legend { font-family: var(--kf-font-label); font-weight: 700; font-size: 1.15rem; }
.shajra-bar h1 { font-size: 1.45rem; }
.shajra-ruler span { font-family: var(--kf-font-label); font-weight: 600; font-size: .72rem; letter-spacing: .08em; }
.t-flag { font-family: var(--kf-font-label); font-weight: 700; font-size: .66rem; letter-spacing: .06em; }
/* Bangla and Arabic keep their own faces; the Latin display faces have no glyphs for them. */
:lang(bn) h1, :lang(bn) h2, :lang(bn) h3, :lang(bn) .kf-brand-name { font-family: "Noto Serif Bengali", var(--kf-font-display); font-weight: 600; letter-spacing: 0; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) .kf-brand-name { font-family: "Noto Naskh Arabic", var(--kf-font-display); font-weight: 700; letter-spacing: 0; }
:lang(bn) h2, :lang(ar) h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); }
:lang(bn) h3, :lang(ar) h3 { font-size: 1.3rem; }

/* ================================================================ JOIN FORM
 * The sections hang off a lineage spine, like the tree. Each numbered
 * medallion turns verdigris when its part is complete, and the spine fills
 * as the applicant goes, so progress reads as the line growing.
 */
.kf-join { --spine-x: 22px; --gutter: 68px; }
.kf-join-head { max-width: 46rem; margin-bottom: 2rem; }
.kf-join-head h1 { margin: .2rem 0 .8rem; }
.kf-join-head .kf-lede { margin-bottom: 1.1rem; }
.kf-join-promises { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.kf-join-promises li {
  display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem .35rem .6rem; border-radius: 999px;
  background: var(--kf-surface); border: 1px solid var(--kf-line); font-size: .88rem; font-weight: 700; color: var(--kf-text);
}
.kf-join-promises .kf-icon { width: 16px; height: 16px; color: var(--kf-verdigris); }

.kf-join-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .kf-join-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; } }
/* re-rating a link or citation in place (genealogy administrators) */
.kf-rate { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.kf-rate .form-select { width: auto; max-width: 15rem; }
.kf-rate .form-control { width: 12rem; max-width: 100%; }
.kf-rate-wrap { flex-basis: 100%; margin-top: .35rem; }
.kf-rate-wrap > summary { cursor: pointer; color: var(--kf-primary); }
.kf-rate-wrap[open] > summary { margin-bottom: .4rem; }
/* a form with no side card: one column, kept to a readable width */
.kf-join-grid.kf-join-grid--single { grid-template-columns: minmax(0, 1fr); max-width: 860px; }

.kf-join-form { position: relative; padding-inline-start: var(--gutter); --p: 0; }
.kf-join-form::before {
  content: ""; position: absolute; inset-inline-start: calc(var(--spine-x) - 1.5px); top: 26px; bottom: 7.5rem; width: 3px; border-radius: 3px;
  background: linear-gradient(to bottom, var(--kf-verdigris) calc(var(--p) * 100%), var(--kf-line-strong) calc(var(--p) * 100%));
  transition: background .4s ease;
}

.kf-jsec {
  position: relative; margin: 0 0 1.5rem; padding: 1.35rem 1.6rem .35rem; min-width: 0;
  background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: 16px; box-shadow: var(--kf-shadow);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.kf-jsec::before { /* stub from the spine to the card, like a child link in the tree */
  content: ""; position: absolute; top: 25px; inset-inline-start: calc(-1 * (var(--gutter) - var(--spine-x)) + 22px);
  width: calc(var(--gutter) - var(--spine-x) - 22px); border-top: 2px solid var(--kf-line-strong);
}
.kf-jsec:focus-within { border-color: color-mix(in srgb, var(--kf-primary) 55%, var(--kf-line)); box-shadow: 0 0 0 4px var(--kf-lapis-tint), var(--kf-shadow); }
.kf-jsec legend { float: left; width: 100%; margin: 0 0 1.1rem; padding: 0; display: flex; align-items: flex-start; gap: .9rem; font: inherit; }
.kf-jsec-num {
  position: absolute; inset-inline-start: calc(-1 * var(--gutter) + var(--spine-x) - 22px); top: 4px;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--kf-surface); border: 2px solid var(--kf-line-strong); color: var(--kf-muted);
  font: 800 1.19rem/1 var(--kf-font-figure); transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.kf-jsec:focus-within .kf-jsec-num { border-color: var(--kf-primary); color: var(--kf-primary); box-shadow: 0 0 0 4px var(--kf-lapis-tint); }
.kf-jsec.is-done .kf-jsec-num { background: var(--kf-verdigris); border-color: var(--kf-verdigris); color: transparent; }
.kf-jsec.is-done .kf-jsec-num::after { content: "✓"; position: absolute; color: #fff; font: 700 1.15rem/1 var(--kf-font-body); }
.kf-jsec.is-done::before { border-top-color: var(--kf-verdigris); }
.kf-jsec-title { display: block; font: 700 1.36rem/1.1 var(--kf-font-label); color: var(--bs-emphasis-color); }
.kf-jsec-title small { display: block; margin-top: .3rem; font: 400 .9rem/1.4 var(--kf-font-body); color: var(--kf-muted); }
.kf-jsec-body { clear: both; }

.kf-jsec--consent { background: color-mix(in srgb, var(--kf-saffron-tint) 70%, var(--kf-surface)); border-color: color-mix(in srgb, var(--kf-saffron) 35%, var(--kf-line)); }
.kf-jsec--consent .form-check { padding: .9rem 1rem .9rem 2.6rem; background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: 12px; }
.kf-jsec--consent .form-check-input { width: 1.25em; height: 1.25em; margin-top: .15em; }
[dir="rtl"] .kf-jsec--consent .form-check { padding: .9rem 2.6rem .9rem 1rem; }

/* inputs: taller, softly filled, a clear focus ring */
:is(.kf-join, .kf-form) :is(.form-control, .form-select) {
  min-height: 42px; background-color: var(--kf-surface-2); border: 1.5px solid var(--kf-line); border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
:is(.kf-join, .kf-form) textarea.form-control { min-height: 120px; line-height: 1.5; }
:is(.kf-join, .kf-form) :is(.form-control, .form-select):hover { border-color: var(--kf-line-strong); }
:is(.kf-join, .kf-form) :is(.form-control, .form-select):focus { background-color: var(--kf-surface); border-color: var(--kf-primary); box-shadow: 0 0 0 4px var(--kf-lapis-tint); }
:is(.kf-join, .kf-form) .kf-field.is-invalid :is(.form-control, .form-select) { border-color: var(--kf-madder); background-color: var(--kf-madder-tint); }
:is(.kf-join, .kf-form) .form-label { font-size: .95rem; }
.kf-join .kf-place { margin-bottom: .2rem; }

/* contact method as segmented cards */
.kf-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: .5rem; }
.kf-seg-opt {
  position: relative; display: flex; align-items: center; gap: .55rem; padding: .75rem .9rem; cursor: pointer;
  border: 1.5px solid var(--kf-line); border-radius: 12px; background: var(--kf-surface-2); font-weight: 700; font-size: .92rem; line-height: 1.25;
  transition: border-color .15s ease, background-color .15s ease;
}
.kf-seg-opt:hover { border-color: var(--kf-line-strong); }
.kf-seg-opt input { accent-color: var(--kf-primary); width: 1.05rem; height: 1.05rem; flex: none; margin: 0; }
.kf-seg-opt:has(input:checked) { border-color: var(--kf-primary); background: var(--kf-lapis-tint); color: var(--bs-emphasis-color); }
.kf-seg-opt:has(input:focus-visible) { outline: 3px solid var(--kf-focus); outline-offset: 2px; }
[data-contact-value][hidden] { display: none; }

/* document drop zone */
.kf-drop-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kf-drop-zone {
  display: grid; justify-items: center; gap: .25rem; padding: 1.4rem 1rem; margin: .1rem 0 0; cursor: pointer; text-align: center;
  border: 2px dashed var(--kf-line-strong); border-radius: 14px; background: var(--kf-surface-2); color: var(--kf-muted);
  transition: border-color .15s ease, background-color .15s ease;
}
.kf-drop-zone .kf-icon {
  width: 42px; height: 42px; padding: 10px; border-radius: 50%; background: var(--kf-lapis-tint); color: var(--kf-primary); margin-bottom: .2rem;
}
.kf-drop-text { font-weight: 700; color: var(--kf-text); overflow-wrap: anywhere; }
.kf-drop-zone small { font-size: .8rem; }
.kf-drop-zone:hover, .kf-drop.is-over .kf-drop-zone { border-color: var(--kf-primary); background: var(--kf-lapis-tint); }
.kf-drop-input:focus-visible + .kf-drop-zone { outline: 3px solid var(--kf-focus); outline-offset: 2px; }
.kf-drop.has-file .kf-drop-zone { border-style: solid; border-color: var(--kf-verdigris); background: var(--kf-verdigris-tint); }
.kf-drop.has-file .kf-drop-zone .kf-icon { background: var(--kf-verdigris); color: #fff; }

/* submit */
.kf-join-submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; margin-top: .5rem; }
.kf-join-ready { margin: 0; color: var(--kf-muted); font-size: .92rem; }
.kf-join-ready.is-ready { color: var(--kf-verdigris); font-weight: 700; }
.kf-join-submit .btn-lg { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.6rem; border-radius: 12px; font-weight: 700; }
.kf-join-submit .btn-lg .kf-icon { width: 18px; height: 18px; }
[dir="rtl"] .kf-join-submit .btn-lg .kf-icon { transform: scaleX(-1); }

/* aside: progress and what happens next */
.kf-join-aside .kf-card + .kf-card { margin-top: 1rem; }
.kf-join-meter { height: 8px; border-radius: 8px; background: var(--kf-surface-2); border: 1px solid var(--kf-line); overflow: hidden; }
.kf-join-meter span { display: block; height: 100%; width: calc(var(--p) * 100%); background: linear-gradient(90deg, var(--kf-verdigris), color-mix(in srgb, var(--kf-verdigris) 70%, var(--kf-saffron))); border-radius: 8px; transition: width .4s ease; }
.kf-join-count { margin: .7rem 0 .6rem; color: var(--kf-muted); font-size: .9rem; }
.kf-join-count b { font: 800 1.72rem/1 var(--kf-font-figure); color: var(--bs-emphasis-color); }
.kf-join-toc { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.kf-join-toc a { display: flex; align-items: center; gap: .6rem; padding: .35rem .4rem; border-radius: 8px; color: var(--kf-text); text-decoration: none; font-size: .92rem; }
.kf-join-toc a:hover { background: var(--kf-surface-2); }
.kf-join-toc a::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid var(--kf-line-strong); background: var(--kf-surface); }
.kf-join-toc a.is-done::before { background: var(--kf-verdigris); border-color: var(--kf-verdigris); }
.kf-join-toc a.is-current { font-weight: 700; }
.kf-join-toc a.is-current::before { border-color: var(--kf-primary); }
.kf-join-steps { counter-reset: s; list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .9rem; }
.kf-join-steps li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 0 .7rem; }
.kf-join-steps li::before { content: counter(s); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--kf-saffron-tint); color: var(--kf-text); font: 800 0.82rem/1 var(--kf-font-figure); }
.kf-join-steps b { font-size: .95rem; }
.kf-join-steps span { font-size: .86rem; color: var(--kf-muted); line-height: 1.45; }

@media (max-width: 991.98px) {
  .kf-join-aside { order: -1; }
  .kf-join-aside .kf-sticky { position: static; }
  .kf-join-next { display: none; }
  .kf-join-toc { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 575.98px) {
  .kf-join { --gutter: 0px; }
  .kf-join-form::before, .kf-jsec::before { display: none; }
  .kf-jsec { padding: 1.1rem 1rem .2rem; border-radius: 14px; }
  .kf-jsec-num { position: static; width: 38px; height: 38px; font-size: 1.25rem; flex: none; }
  .kf-jsec-title { font-size: 1.35rem; }
  .kf-join-submit { position: sticky; bottom: 0; z-index: 5; margin: 0 -16px; padding: .8rem 16px; background: var(--kf-surface); border-top: 1px solid var(--kf-line); box-shadow: 0 -6px 20px rgba(20, 28, 40, .08); }
  .kf-join-submit .btn-lg { width: 100%; justify-content: center; }
  .kf-join-ready { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .kf-join-form::before, .kf-jsec, .kf-jsec-num, .kf-join-meter span, .kf-seg-opt, .kf-drop-zone { transition: none; }
}

/* people list header */
.kf-results-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin: 0 0 .8rem; font-weight: 700; }
.kf-results-head .kf-mono { font-weight: 400; }
.kf-results-head a { margin-inline-start: auto; font-weight: 400; }

/* private file inputs: show that a file is attached, never a public link */
.kf-private-file { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .55rem .75rem; margin-bottom: .45rem; border: 1px solid var(--kf-line); border-radius: var(--kf-radius-sm); background: var(--kf-surface-2); }
.kf-private-file img { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; }
.kf-private-file span { font-weight: 700; }
.kf-private-file-clear { margin-inline-start: auto; font-size: .9rem; color: var(--kf-muted); display: inline-flex; gap: .35rem; align-items: center; }

/* alternate names with actions; source lines kept apart */
.kf-names li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.kf-name-actions { display: flex; gap: .25rem; align-items: center; }
.kf-name-actions form { margin: 0; }
.kf-source-line { margin: 0 0 .6rem; padding: .55rem .8rem; border-inline-start: 3px solid var(--kf-saffron); background: var(--kf-surface-2); border-radius: 0 var(--kf-radius-sm) var(--kf-radius-sm) 0; font-size: .95rem; }
.kf-source-line:last-child { margin-bottom: 0; }
.kf-source-line footer { margin-top: .25rem; }

/* ================================================================ FORM PAGES
 * Every person form (edit, propose, add a relative or a name) shares this
 * shell: whose record it is, the rule that applies, sections as cards, and a
 * save bar that stays in reach.
 */
.kf-card.kf-fieldset { padding: 1.35rem 1.5rem .4rem; margin: 0 0 1.25rem; min-width: 0; }
.kf-card.kf-fieldset > legend { float: left; width: 100%; margin: 0 0 1rem; padding: 0; font-family: var(--kf-font-label); font-size: 1.45rem; line-height: 1.15; }
.kf-card.kf-fieldset > legend + * { clear: both; }

.kf-formpage { max-width: 1120px; margin: 0 auto; }
.kf-formpage--single { max-width: 760px; }
.kf-formpage-head { margin-bottom: 1.6rem; }
.kf-back { display: inline-flex; align-items: center; gap: .3rem; font-size: .92rem; text-decoration: none; margin-bottom: 1rem; }
.kf-back .kf-icon { width: 15px; height: 15px; transform: rotate(180deg); }
[dir="rtl"] .kf-back .kf-icon { transform: none; }
.kf-identity { display: flex; align-items: center; gap: 1.1rem; }
.kf-identity .kf-avatar { --size: 72px; font-size: 1.5rem; box-shadow: 0 0 0 3px var(--kf-surface), 0 0 0 5px color-mix(in srgb, var(--kf-saffron) 70%, transparent); }
.kf-identity .kf-eyebrow { margin: 0; }
.kf-identity h1 { margin: .1rem 0 .25rem; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.9rem); }
.kf-identity-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .75rem; font-size: .98rem; }
.kf-identity-meta .kf-mono { font-size: .8rem; }
.kf-formpage-head > p { margin: 1rem 0 0; max-width: 44rem; }

.kf-rule-note {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: 1.25rem; padding: .85rem 1rem;
  border-radius: 12px; background: var(--kf-lapis-tint); border: 1px solid color-mix(in srgb, var(--kf-primary) 25%, transparent);
}
.kf-rule-note > .kf-icon { width: 22px; height: 22px; color: var(--kf-primary); flex: none; }
.kf-rule-note p { margin: 0; flex: 1 1 22rem; font-size: .93rem; color: var(--kf-text); }

.kf-formpage-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .kf-formpage--aside .kf-formpage-grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 2.5rem; } }

/* sections with an icon medallion */
.kf-fsec { border-radius: 16px; box-shadow: var(--kf-shadow); scroll-margin-top: calc(var(--kf-header-h) + 1rem); transition: border-color .2s ease, box-shadow .2s ease; }
.kf-fsec:focus-within { border-color: color-mix(in srgb, var(--kf-primary) 55%, var(--kf-line)); box-shadow: 0 0 0 4px var(--kf-lapis-tint), var(--kf-shadow); }
.kf-card.kf-fsec > legend { display: flex; align-items: flex-start; gap: .9rem; }
.kf-fsec-icon {
  width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: var(--kf-lapis-tint); color: var(--kf-primary); transition: background .2s ease, color .2s ease;
}
.kf-fsec-icon .kf-icon { width: 21px; height: 21px; }
.kf-fsec:focus-within .kf-fsec-icon { background: var(--kf-primary); color: var(--kf-primary-contrast); }
.kf-fsec-title { display: block; font: 700 1.32rem/1.1 var(--kf-font-label); color: var(--bs-emphasis-color); }
.kf-fsec-title small { display: block; margin-top: .3rem; font: 400 .88rem/1.45 var(--kf-font-body); color: var(--kf-muted); max-width: 40rem; }
.kf-consent-box .form-check { padding: .85rem 1rem .85rem 2.6rem; border: 1px solid var(--kf-line); border-radius: 12px; background: var(--kf-surface-2); }
[dir="rtl"] .kf-consent-box .form-check { padding: .85rem 2.6rem .85rem 1rem; }

/* save bar */
.kf-form-bar {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: .6rem; margin-top: .5rem;
  padding: .85rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--kf-surface) 92%, transparent);
  border: 1px solid var(--kf-line); box-shadow: 0 -6px 24px rgba(20, 28, 40, .08); backdrop-filter: blur(6px);
}
.kf-form-bar .btn-lg { padding: .7rem 1.5rem; border-radius: 11px; font-weight: 700; }

/* aside */
.kf-formpage-aside .kf-card + .kf-card { margin-top: 1rem; }
.kf-section-nav { display: grid; gap: .15rem; padding: .7rem; }
.kf-section-nav a { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: 9px; color: var(--kf-text); text-decoration: none; font-weight: 700; font-size: .95rem; }
.kf-section-nav a .kf-icon { width: 18px; height: 18px; color: var(--kf-muted); }
.kf-section-nav a:hover, .kf-section-nav a.is-current { background: var(--kf-lapis-tint); }
.kf-section-nav a.is-current .kf-icon { color: var(--kf-primary); }
.kf-aside-note { display: flex; gap: .75rem; font-size: .88rem; }
.kf-aside-note > .kf-icon { width: 20px; height: 20px; flex: none; color: var(--kf-verdigris); margin-top: .1rem; }
.kf-aside-note p { margin: .2rem 0 .4rem; color: var(--kf-muted); }

@media (max-width: 991.98px) {
  .kf-formpage-aside { order: -1; }
  .kf-formpage-aside .kf-sticky { position: static; }
  .kf-section-nav { display: flex; overflow-x: auto; scrollbar-width: none; }
  .kf-section-nav a { flex: none; }
  .kf-aside-note { display: none; }
}
@media (max-width: 575.98px) {
  .kf-identity { align-items: flex-start; }
  .kf-identity .kf-avatar { --size: 52px; font-size: 1.1rem; }
  .kf-card.kf-fieldset { padding: 1.1rem 1rem .2rem; }
  .kf-fsec-icon { width: 36px; height: 36px; }
  .kf-fsec-title { font-size: 1.3rem; }
  .kf-form-bar { margin-inline: -16px; border-radius: 0; border-inline: 0; }
  .kf-form-bar .btn-lg { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .kf-fsec, .kf-fsec-icon { transition: none; } }
.kf-source-edit { margin-inline-start: .5rem; font-weight: 700; white-space: nowrap; }

/* ================================================================ HOME HERO
 * Dawn over the Jamuna: the illustration fills the band, the copy sits on the
 * dark sky to its left. The same scene in light and dark mode (it is already
 * a night-to-dawn picture), so text colours here are fixed, not tokens.
 */

.kf-hero2-copy { max-width: 36rem; }
.kf-hero2-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(4px);
  font: 700 0.77rem/1.2 var(--kf-font-label); letter-spacing: .08em; text-transform: uppercase; color: #ffe2a8;
}
:lang(bn) .kf-hero2-eyebrow, :lang(ar) .kf-hero2-eyebrow { text-transform: none; letter-spacing: .01em; font-family: var(--kf-font-body); }

.kf-hero2-lede { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); line-height: 1.6; color: rgba(255, 255, 255, .86); margin-bottom: 1.8rem; }
.kf-hero2-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.kf-btn-sun {
  --bs-btn-color: #132841; --bs-btn-bg: #f6c463; --bs-btn-border-color: #f6c463;
  --bs-btn-hover-color: #132841; --bs-btn-hover-bg: #ffd47e; --bs-btn-hover-border-color: #ffd47e;
  --bs-btn-active-bg: #eab450; --bs-btn-active-color: #132841;
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; border-radius: 12px; box-shadow: 0 10px 30px rgba(242, 180, 90, .35);
}
.kf-btn-glass {
  --bs-btn-color: #fff; --bs-btn-bg: rgba(255, 255, 255, .08); --bs-btn-border-color: rgba(255, 255, 255, .4);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, .16); --bs-btn-hover-border-color: #fff;
  font-weight: 700; border-radius: 12px; backdrop-filter: blur(4px);
}

.kf-hero2-figures { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; margin: 2.4rem 0 0; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .18); }
.kf-hero2-figures div { display: flex; flex-direction: column-reverse; }
.kf-hero2-figures dd { margin: 0; font: 800 2.13rem/1 var(--kf-font-figure); color: #ffe2a8; }
.kf-hero2-figures dt { font-weight: 400; font-size: .86rem; color: rgba(255, 255, 255, .72); margin-top: .3rem; }

/* ---------------------------------------------------------- feature tiles */
.kf-features-head { max-width: 40rem; margin-bottom: 1.8rem; }
.kf-features-head h2 { margin: .2rem 0 0; }
.kf-feature-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .kf-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .kf-feature-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.kf-feature a {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; height: 100%; padding: 1.25rem 1.3rem;
  border-radius: 18px; background: var(--kf-surface); border: 1px solid var(--kf-line); color: var(--kf-text); text-decoration: none;
  box-shadow: var(--kf-shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; overflow: hidden;
}
.kf-feature a::before { /* a soft wash of the tile's colour in one corner */
  content: ""; position: absolute; inset-inline-end: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--fc) 22%, transparent), transparent 70%); pointer-events: none;
}
.kf-feature a:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--fc) 45%, var(--kf-line)); box-shadow: 0 14px 34px color-mix(in srgb, var(--fc) 18%, transparent); }
.kf-feature a:focus-visible { outline: 3px solid var(--kf-focus); outline-offset: 3px; }
.kf-feature-icon {
  grid-row: span 2; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--fc) 72%, #fff), var(--fc) 55%, color-mix(in srgb, var(--fc) 80%, #000));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--fc) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.kf-feature-icon .kf-icon { width: 26px; height: 26px; }
.kf-feature b { font: 700 1.14rem/1.15 var(--kf-font-label); color: var(--bs-emphasis-color); align-self: end; }
.kf-feature span:not(.kf-feature-icon) { font-size: .92rem; color: var(--kf-muted); line-height: 1.5; }
:lang(bn) .kf-feature b, :lang(ar) .kf-feature b { font-family: var(--kf-font-body); font-weight: 700; font-size: 1.1rem; }

.kf-section--tint { background: color-mix(in srgb, var(--kf-lapis-tint) 55%, var(--kf-bg)); }
.kf-root-link { color: inherit; text-decoration-color: color-mix(in srgb, var(--kf-saffron) 70%, transparent); text-underline-offset: .2em; }
@media (prefers-reduced-motion: reduce) { .kf-feature a { transition: none; } .kf-feature a:hover { transform: none; } }

/* ================================================================ GENERATIONS & LINES */
.kf-gen-filter { max-width: 420px; margin: -.5rem 0 1.25rem; }
.kf-gen-strip { display: flex; align-items: flex-end; gap: .9rem; margin-bottom: 1.75rem; padding: .9rem 1rem; background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: 16px; box-shadow: var(--kf-shadow); }
.kf-gen-strip-label { font: 700 0.72rem/1 var(--kf-font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--kf-muted); padding-bottom: .55rem; flex: none; }
.kf-gen-strip ol { list-style: none; margin: 0; padding: 0; display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: thin; flex: 1; }
.kf-gen-strip a {
  display: grid; justify-items: center; gap: .2rem; min-width: 40px; padding: .35rem .3rem .4rem; border-radius: 10px;
  color: var(--kf-text); text-decoration: none; border: 1px solid transparent;
}
.kf-gen-strip a:hover { background: var(--kf-lapis-tint); }
.kf-gen-bar { width: 14px; height: 46px; border-radius: 4px 4px 2px 2px; background: linear-gradient(to top, var(--kf-v-gen) var(--h), color-mix(in srgb, var(--kf-v-gen) 12%, transparent) var(--h)); }
.kf-gen-strip b { font: 800 0.86rem/1 var(--kf-font-figure); }
.kf-gen-strip small { font-size: .68rem; color: var(--kf-muted); font-variant-numeric: tabular-nums; }
.kf-gen-strip a[aria-current="page"] { background: var(--kf-saffron-tint); border-color: color-mix(in srgb, var(--kf-saffron) 55%, transparent); }
.kf-gen-strip a[aria-current="page"] .kf-gen-bar { background: linear-gradient(to top, var(--kf-saffron) var(--h), color-mix(in srgb, var(--kf-saffron) 15%, transparent) var(--h)); }

.kf-gen-grid { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.kf-gen-card {
  position: relative; display: flex; flex-direction: column; gap: .8rem; padding: 1.1rem 1.2rem 1rem; border-radius: 16px;
  background: var(--kf-surface); border: 1px solid var(--kf-line); box-shadow: inset 4px 0 0 var(--bc, var(--kf-line-strong)), var(--kf-shadow);
}
[dir="rtl"] .kf-gen-card { box-shadow: inset -4px 0 0 var(--bc, var(--kf-line-strong)), var(--kf-shadow); }
.kf-gen-card-head { display: flex; align-items: center; gap: .8rem; }
.kf-gen-card-head .kf-avatar { --size: 46px; box-shadow: 0 0 0 2px var(--kf-surface), 0 0 0 4px var(--bc, var(--kf-line-strong)); }
.kf-gen-name { display: block; font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: var(--kf-text); text-decoration: none; }
.kf-gen-name:hover { text-decoration: underline; }
.kf-gen-meta { font-size: .8rem; color: var(--kf-muted); }
.kf-gen-meta .kf-mono { font-size: .74rem; }
.kf-gen-note { margin: 0; font-size: .82rem; color: var(--kf-muted); }
.kf-gen-actions { display: flex; gap: .4rem; margin-top: auto; }

/* the mini silsila: nearest ancestors first, a fold, then the top of the line */
.kf-silsila { list-style: none; margin: 0; padding: 0 0 0 .2rem; position: relative; display: grid; gap: .2rem; font-size: .88rem; }
.kf-silsila::before { content: ""; position: absolute; inset-block: .55rem .55rem; inset-inline-start: .45rem; border-inline-start: 2px solid var(--kf-line-strong); }
.kf-silsila li { position: relative; padding-inline-start: 1.35rem; line-height: 1.35; }
.kf-silsila li::before { content: ""; position: absolute; inset-inline-start: .2rem; top: .35em; width: 10px; height: 10px; border-radius: 50%; background: var(--kf-surface); border: 2px solid var(--kf-v-gen); }
.kf-silsila a { color: var(--kf-text); text-decoration: none; }
.kf-silsila a:hover { text-decoration: underline; }
.kf-silsila-fold a { display: inline-block; padding: .05rem .55rem; border-radius: 999px; background: var(--kf-surface-2); border: 1px dashed var(--kf-line-strong); color: var(--kf-muted); font-size: .78rem; }
.kf-silsila-fold::before { border-style: dashed !important; background: transparent !important; border-color: var(--kf-line-strong) !important; }
.kf-silsila-top.is-root::before { background: var(--kf-saffron); border-color: var(--kf-saffron); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kf-saffron) 25%, transparent); }
.kf-silsila-top.is-root a { font-weight: 700; }

/* the full line page */
.kf-line { list-style: none; margin: 0; padding: 0; }
.kf-line-step { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 0 1rem; padding-top: 2rem; }
.kf-line-step:first-child { padding-top: 0; }
.kf-line-step::before { /* the connector to the person above, drawn in that link's certainty style */
  content: ""; position: absolute; top: 0; height: 2rem; inset-inline-start: 25px; border-inline-start: 3px solid var(--kf-tree-line);
}
.kf-line-step:first-child::before { display: none; }
.kf-line-step[data-c="reported"]::before { border-inline-start-style: dashed; }
.kf-line-step[data-c="estimated"]::before { border-inline-start-style: dotted; }
.kf-line-step[data-c="disputed"]::before { border-inline-start: 6px double var(--kf-madder); inset-inline-start: 23px; }
.kf-line-step[data-c="unverified"]::before { border-inline-start: 2px solid var(--kf-spine); inset-inline-start: 26px; }
.kf-line-gen {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; align-self: center;
  background: var(--kf-surface); border: 2px solid var(--kf-line-strong); font: 800 1.11rem/1 var(--kf-font-figure); color: var(--kf-muted);
}
.kf-line-card {
  display: grid; gap: .1rem; padding: .7rem 1rem; border-radius: 12px; background: var(--kf-surface); border: 1px solid var(--kf-line);
  box-shadow: inset 4px 0 0 var(--bc, transparent), var(--kf-shadow);
}
.kf-line-card a { font-weight: 700; color: var(--kf-text); text-decoration: none; font-size: 1.02rem; }
.kf-line-card a:hover { text-decoration: underline; }
.kf-line-meta { font-size: .8rem; color: var(--kf-muted); }
.kf-line-meta .kf-mono { font-size: .74rem; }
.kf-line-step.is-root .kf-line-gen { background: var(--kf-saffron); border-color: var(--kf-saffron); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--kf-saffron) 22%, transparent); }
.kf-line-step.is-root .kf-line-card { border-color: color-mix(in srgb, var(--kf-saffron) 55%, var(--kf-line)); }
.kf-line-step.is-self .kf-line-gen { background: var(--kf-primary); border-color: var(--kf-primary); color: var(--kf-primary-contrast); }
.kf-line-step.is-self .kf-line-card { border-color: var(--kf-primary); box-shadow: 0 0 0 3px var(--kf-lapis-tint), var(--kf-shadow); }

/* add a new family branch, inline in a form */
.kf-new-branch { margin: -.4rem 0 1.15rem; border: 1px dashed var(--kf-line-strong); border-radius: 12px; padding: .2rem .9rem; background: var(--kf-surface-2); }
.kf-new-branch[open] { padding-bottom: .1rem; }
.kf-new-branch summary { cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 0; font-weight: 700; font-size: .92rem; color: var(--kf-link); list-style: none; }
.kf-new-branch summary::-webkit-details-marker { display: none; }
.kf-new-branch summary .kf-icon { width: 16px; height: 16px; }
.kf-new-branch[open] summary { margin-bottom: .5rem; }

@media print {
  .kf-noprint { display: none !important; }
  .kf-line-card, .kf-line-gen { box-shadow: none !important; }
  .kf-line-step { break-inside: avoid; }
}

/* ================================================================ FAMILY TREE MENU */
.kf-mega { padding: 1rem; border-radius: 16px; border: 1px solid var(--kf-line); box-shadow: 0 18px 50px rgba(20, 28, 40, .16); background: var(--kf-surface); }
@media (min-width: 992px) { .kf-mega { width: 560px; } }
.kf-mega-cols { display: grid; gap: .25rem 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 992px) { .kf-mega-cols { grid-template-columns: 1fr 1fr; } }
.kf-mega-h { display: block; margin: .3rem .5rem .35rem; font: 700 0.69rem/1 var(--kf-font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--kf-muted); }
.kf-mega-h:not(:first-child) { margin-top: .9rem; }
:lang(bn) .kf-mega-h, :lang(ar) .kf-mega-h { text-transform: none; letter-spacing: 0; font-family: var(--kf-font-body); }
.kf-mega-link { display: flex; align-items: center; gap: .7rem; padding: .5rem; border-radius: 11px; color: var(--kf-text); text-decoration: none; }
.kf-mega-link:hover, .kf-mega-link:focus-visible { background: var(--kf-lapis-tint); color: var(--kf-text); }
.kf-mega-link b { display: block; font-size: .94rem; line-height: 1.2; }
.kf-mega-link small { display: block; font-size: .78rem; color: var(--kf-muted); line-height: 1.3; }
.kf-mega-icon {
  width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--fc) 70%, #fff), var(--fc) 60%, color-mix(in srgb, var(--fc) 82%, #000));
  box-shadow: 0 5px 12px color-mix(in srgb, var(--fc) 30%, transparent);
}
.kf-mega-icon .kf-icon { width: 18px; height: 18px; }
.kf-mega-branches { list-style: none; margin: 0; padding: 0 .5rem; display: grid; gap: .1rem; font-size: .92rem; }
.kf-mega-branches a { color: var(--kf-text); text-decoration: none; }
.kf-mega-branches a:hover { text-decoration: underline; }
.kf-mega-note { margin: 0 .5rem; font-size: .84rem; color: var(--kf-muted); }
.kf-mega-find { margin-top: .9rem; padding: .8rem .6rem .3rem; border-top: 1px solid var(--kf-line); }
.kf-mega-find label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .35rem; }
.kf-mega-find .dropdown-menu { max-height: 280px; overflow-y: auto; }
@media (max-width: 991.98px) {
  .kf-mega { box-shadow: none; border: 0; padding: .25rem 0 .75rem; background: transparent; }
}

/* ================================================================ SUFI ORNAMENT
 * Decoration drawn from the Chishti shrine at Ajmer and from illuminated
 * manuscripts: the eight-point star (khatam), the gold ruled frame (jadwal),
 * the crenellated kangura frieze along a parapet, and a faint jali lattice.
 * Ornament only: gold never carries text, and nothing sits behind the tree
 * canvas or form inputs. Shapes are masks, so they follow the theme tokens.
 */
:root {
  --kf-orn-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(12 12)'%3E%3Crect x='-7.6' y='-7.6' width='15.2' height='15.2'/%3E%3Crect x='-7.6' y='-7.6' width='15.2' height='15.2' transform='rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
  --kf-orn-jali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M22 4l5 9 10-2-2 10 9 5-9 5 2 10-10-2-5 9-5-9-10 2 2-10-9-5 9-5-2-10 10 2z' fill='none' stroke='black' stroke-width='1.1'/%3E%3Ccircle cx='22' cy='22' r='3' fill='none' stroke='black'/%3E%3C/svg%3E");
  --kf-orn-kangura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 12V9.5c2.6 0 3.6-1.6 4.6-3.6S7.4 2 12 0c4.6 2 6.4 3.9 7.4 5.9s2 3.6 4.6 3.6V12z'/%3E%3C/svg%3E");
}

/* Header: a shrine-green and gold band along the top edge. */
.kf-header::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--kf-emerald), var(--kf-gold) 50%, var(--kf-emerald));
}


/* Eyebrows open with a small gold star. */
.kf-eyebrow::before {
  content: ""; display: inline-block; width: .85em; height: .85em; margin-inline-end: .5em; vertical-align: -.08em;
  background: var(--kf-gold);
  -webkit-mask: var(--kf-orn-star) center / contain no-repeat; mask: var(--kf-orn-star) center / contain no-repeat;
}

/* Section rules: a hairline either side of a star. */
.kf-rule {
  border: 0; height: 14px; opacity: 1; background: var(--kf-gold-soft);
  -webkit-mask: var(--kf-orn-star) center / 12px 12px no-repeat,
    linear-gradient(#000 0 0) left center / calc(50% - 14px) 1px no-repeat,
    linear-gradient(#000 0 0) right center / calc(50% - 14px) 1px no-repeat;
  mask: var(--kf-orn-star) center / 12px 12px no-repeat,
    linear-gradient(#000 0 0) left center / calc(50% - 14px) 1px no-repeat,
    linear-gradient(#000 0 0) right center / calc(50% - 14px) 1px no-repeat;
}

/* Empty states carry a faint star above their message. */
.kf-empty::before {
  content: ""; display: block; width: 2.2rem; height: 2.2rem; margin: 0 auto .8rem;
  background: var(--kf-gold-soft);
  -webkit-mask: var(--kf-orn-star) center / contain no-repeat; mask: var(--kf-orn-star) center / contain no-repeat;
}

/* Footer: a kangura parapet along its top, with a faint lattice behind. */
.kf-footer { position: relative; isolation: isolate; border-top: 0; margin-top: 14px; }
.kf-footer::before {
  content: ""; position: absolute; inset-inline: 0; top: -12px; height: 12px; pointer-events: none;
  background: var(--kf-surface);
  -webkit-mask: var(--kf-orn-kangura) 0 100% / 24px 12px repeat-x; mask: var(--kf-orn-kangura) 0 100% / 24px 12px repeat-x;
}
.kf-footer::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: var(--kf-gold); opacity: .12;
  -webkit-mask: var(--kf-orn-jali) 0 0 / 44px 44px, linear-gradient(#000, transparent 85%);
  -webkit-mask-composite: source-in;
  mask: var(--kf-orn-jali) 0 0 / 44px 44px, linear-gradient(#000, transparent 85%);
  mask-composite: intersect;
}
.kf-footer > .container-xxl { border-top: 1px solid var(--kf-gold-soft); padding-top: 2rem; }

/* ================================================================ LIST VIEW
 * The tree as a silsila, a chain of descent. Each person hangs off the
 * family spine by a stub drawn in that link's certainty style, the same
 * vocabulary as the visual tree; the stars are the people. Logical
 * properties mirror the whole thing in Arabic without extra rules.
 */
.kf-chain { padding: 1.4rem 1.2rem 1.2rem; }
.kf-chain-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; padding: 0 .4rem 1rem; margin-bottom: .9rem; border-bottom: 1px solid var(--kf-line); }
.kf-chain-head p { margin: 0; color: var(--kf-muted); font-size: .92rem; }
.kf-chain-tools { display: flex; gap: .4rem; }
.kf-chain-tools .btn { padding: .3rem .75rem; font-size: .88rem; }

.kf-outline, .kf-outline ul { list-style: none; margin: 0; padding: 0; }
.kf-outline > li > ul { margin-inline-start: calc(1.7rem - 1px); }
.kf-outline ul ul { margin-inline-start: calc(1.4rem - 1px); }
.kf-outline ul > li { position: relative; padding-inline-start: 1.9rem; }
.kf-outline ul > li::before { /* the spine shared by brothers and sisters */
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; border-inline-start: 2px solid var(--kf-line-strong);
}
.kf-outline ul > li:last-child::before { bottom: auto; height: 1.3rem; }
.kf-outline ul > li::after { /* the stub to this child, in the link's certainty style */
  content: ""; position: absolute; inset-inline-start: 0; top: calc(1.3rem - 1px); width: 2.5rem; border-top: 2px solid var(--kf-tree-line);
}
.kf-outline li[data-c="reported"]::after { border-top-style: dashed; }
.kf-outline li[data-c="estimated"]::after { border-top-style: dotted; border-top-width: 3px; }
.kf-outline li[data-c="disputed"]::after { border-top: 5px double var(--kf-madder); top: calc(1.3rem - 2px); }
.kf-outline li[data-c="unverified"]::after { border-top: 1px solid var(--kf-spine); }

.kf-ol-row {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .15rem .8rem; align-items: start;
  padding: .6rem .7rem; border-radius: var(--kf-radius-sm); transition: background .15s ease;
}
.kf-ol-row:hover { background: var(--kf-lapis-tint); }
.kf-ol-node {
  width: 1.4rem; height: 1.4rem; margin-top: 0;
  background: radial-gradient(circle, var(--kf-surface) 0 17%, var(--kf-emerald) 19%);
  -webkit-mask: var(--kf-orn-star) center / contain no-repeat; mask: var(--kf-orn-star) center / contain no-repeat;
}
.kf-ol-row:hover .kf-ol-node { background: radial-gradient(circle, var(--kf-lapis-tint) 0 17%, var(--kf-emerald) 19%); }
.kf-ol-body { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .75rem; padding-top: .05rem; }
.kf-ol-name { font-weight: 700; font-size: 1.05rem; line-height: 1.35; color: var(--bs-emphasis-color); text-decoration: none; unicode-bidi: plaintext; }
.kf-ol-name:hover { color: var(--kf-link); text-decoration: underline; }
.kf-ol-meta { font-family: var(--kf-font-mono); font-size: .8rem; color: var(--kf-muted); letter-spacing: .02em; }
.kf-ol-tags { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .9rem; font-size: .82rem; color: var(--kf-muted); }
.kf-ol-tags .kf-cert { font-size: .82rem; }
.kf-ol-tags .kf-cert::before { width: 20px; }
.kf-ol-count { display: inline-flex; align-items: center; gap: .35rem; }
.kf-ol-more {
  display: inline-flex; align-items: center; gap: .35rem; margin: .1rem 0 .4rem; margin-inline-start: calc(.7rem + 1.4rem + .8rem);
  padding: .25rem .75rem; border: 1px solid var(--kf-gold-soft); border-radius: 999px; font-size: .86rem; font-weight: 700; text-decoration: none;
}
.kf-ol-more:hover { background: var(--kf-saffron-tint); }
.kf-ol-fold {
  width: 2rem; height: 2rem; margin: -.3rem 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--kf-line); border-radius: 50%; background: var(--kf-surface); color: var(--kf-muted);
}
.kf-ol-fold:hover { color: var(--kf-text); border-color: var(--kf-line-strong); }
.kf-ol-fold .kf-icon { transform: rotate(90deg); transition: transform .2s ease; }
.kf-ol-fold[aria-expanded="false"] .kf-icon { transform: none; }
[dir="rtl"] .kf-ol-fold[aria-expanded="false"] .kf-icon { transform: rotate(180deg); }

/* The starting person: a gold medallion on an illuminated panel. */
.kf-outline > li > .kf-ol-row {
  background: linear-gradient(100deg, var(--kf-saffron-tint), transparent 75%);
  border: 1px solid var(--kf-gold-soft); padding-block: .8rem;
}
.kf-outline > li > .kf-ol-row .kf-ol-node { width: 2rem; height: 2rem; background: radial-gradient(circle, var(--kf-surface) 0 15%, var(--kf-gold) 17%); }
.kf-outline > li > .kf-ol-row .kf-ol-name { font-family: var(--kf-font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.25; }
.kf-outline > li > ul { margin-top: .35rem; }
.kf-outline > li > ul > li:first-child::before { top: -.35rem; }

@media (max-width: 575.98px) {
  .kf-chain { padding: 1rem .6rem; }
  .kf-outline ul > li { padding-inline-start: 1.1rem; }
  .kf-outline ul > li::after { width: 1.7rem; }
  .kf-ol-row { padding-inline: .5rem; gap: .15rem .6rem; }
  .kf-outline > li > ul { margin-inline-start: calc(1.5rem - 1px); }
  .kf-outline ul ul { margin-inline-start: calc(1.2rem - 1px); }
  .kf-ol-more { margin-inline-start: calc(.5rem + 1.4rem + .6rem); }
}
@media (prefers-reduced-motion: reduce) { .kf-ol-row, .kf-ol-fold .kf-icon { transition: none; } }

/* ================================================================ TIMELINE
 * One spine for both readings: decades for the dated records, generations
 * for everyone on a line from the root. Stops are eight-point stars.
 */

.kf-tl-note { color: var(--kf-muted); max-width: 46rem; margin: -.4rem 0 1.2rem; font-size: .95rem; }

.kf-tl-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem 1.5rem; }
.kf-tl-people a { font-weight: 700; }
.kf-tl-meta { display: block; font-size: .85rem; color: var(--kf-muted); }
.kf-tl-names { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.kf-tl-names li {
  display: inline-flex; align-items: baseline; gap: .4rem; padding: .3rem .8rem; border-radius: 999px;
  background: var(--kf-surface-2); border: 1px solid var(--kf-line); font-size: .93rem;
}
.kf-tl-names li:hover { border-color: var(--kf-gold-soft); background: var(--kf-saffron-tint); }
.kf-tl-names a { color: var(--kf-text); text-decoration: none; unicode-bidi: plaintext; }
.kf-tl-names a:hover { text-decoration: underline; }
.kf-tl-names .kf-mono { color: var(--kf-muted); font-size: .76rem; }

/* ================================================================ SOURCES
 * The register as a shelf of bound volumes. Each source type has its own
 * binding colour (spine and seal); reliability is tooled into three gold
 * pips; the transcription is set as a ruled manuscript folio.
 */
.kf-src-type { --src: #5C6773; }
.kf-src-type[data-type="family_book"] { --src: #8C5A1E; }
.kf-src-type[data-type="manuscript"] { --src: #1E6B4E; }
.kf-src-type[data-type="certificate"] { --src: #1F3A5F; }
.kf-src-type[data-type="photograph"] { --src: #8A3B5C; }
.kf-src-type[data-type="oral_history"] { --src: #5B4A9E; }
.kf-src-type[data-type="public_record"] { --src: #2F6F7E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kf-src-type { --src: #A3AEBB; }
  :root:not([data-theme="light"]) .kf-src-type[data-type="family_book"] { --src: #D9A55A; }
  :root:not([data-theme="light"]) .kf-src-type[data-type="manuscript"] { --src: #5FBF95; }
  :root:not([data-theme="light"]) .kf-src-type[data-type="certificate"] { --src: #9DBBE3; }
  :root:not([data-theme="light"]) .kf-src-type[data-type="photograph"] { --src: #E48DB0; }
  :root:not([data-theme="light"]) .kf-src-type[data-type="oral_history"] { --src: #A99BE8; }
  :root:not([data-theme="light"]) .kf-src-type[data-type="public_record"] { --src: #77C2CF; }
}
:root[data-theme="dark"] .kf-src-type { --src: #A3AEBB; }
:root[data-theme="dark"] .kf-src-type[data-type="family_book"] { --src: #D9A55A; }
:root[data-theme="dark"] .kf-src-type[data-type="manuscript"] { --src: #5FBF95; }
:root[data-theme="dark"] .kf-src-type[data-type="certificate"] { --src: #9DBBE3; }
:root[data-theme="dark"] .kf-src-type[data-type="photograph"] { --src: #E48DB0; }
:root[data-theme="dark"] .kf-src-type[data-type="oral_history"] { --src: #A99BE8; }
:root[data-theme="dark"] .kf-src-type[data-type="public_record"] { --src: #77C2CF; }

.kf-shelf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-bottom: 1.6rem; }
.kf-shelf-search { position: relative; flex: 0 1 340px; }
.kf-shelf-search .kf-icon { position: absolute; inset-inline-start: .9rem; top: 50%; transform: translateY(-50%); color: var(--kf-muted); }
.kf-shelf-search .form-control { padding-inline-start: 2.5rem; border-radius: 999px; background: var(--kf-surface); }
.kf-shelf-types { display: flex; flex-wrap: wrap; gap: .45rem; }
.kf-type-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: 999px;
  border: 1px solid var(--kf-line); background: var(--kf-surface); color: var(--kf-text); text-decoration: none; font-size: .9rem; font-weight: 700;
}
.kf-type-chip .kf-icon { color: var(--src, var(--kf-muted)); }
.kf-type-chip b { font: 500 .78rem/1 var(--kf-font-mono); color: var(--kf-muted); }
.kf-type-chip:hover { border-color: var(--src, var(--kf-line-strong)); color: var(--kf-text); }
.kf-type-chip[aria-current] { background: var(--kf-text); border-color: var(--kf-text); color: var(--kf-bg); }
.kf-type-chip[aria-current] .kf-icon, .kf-type-chip[aria-current] b { color: inherit; }

.kf-shelf { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }
.kf-volume {
  position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.3rem 1.1rem; padding-inline-start: 2rem;
  background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: var(--kf-radius); overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.kf-volume:hover { border-color: color-mix(in srgb, var(--src) 55%, var(--kf-line)); box-shadow: var(--kf-shadow); transform: translateY(-2px); }
.kf-volume:has(a:focus-visible) { outline: 3px solid var(--kf-focus); outline-offset: 2px; }
.kf-volume-spine { /* the binding, with gold-tooled bands at head and tail */
  position: absolute; inset-block: 0; inset-inline-start: 0; width: 10px; background:
    linear-gradient(var(--kf-gold), var(--kf-gold)) 0 18px / 100% 2px no-repeat,
    linear-gradient(var(--kf-gold), var(--kf-gold)) 0 24px / 100% 1px no-repeat,
    linear-gradient(var(--kf-gold), var(--kf-gold)) 0 calc(100% - 18px) / 100% 2px no-repeat,
    linear-gradient(var(--kf-gold), var(--kf-gold)) 0 calc(100% - 24px) / 100% 1px no-repeat,
    var(--src);
}
.kf-volume-head { display: flex; align-items: center; gap: .55rem; }
.kf-volume-icon, .kf-src-seal {
  display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--src) 13%, var(--kf-surface)); color: var(--src);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--src) 30%, transparent);
}
.kf-volume-type { font: 700 0.72rem/1.2 var(--kf-font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--kf-muted); }
:lang(bn) .kf-volume-type, :lang(ar) .kf-volume-type { text-transform: none; letter-spacing: 0; }
.kf-volume-lock { margin-inline-start: auto; color: var(--kf-muted); }
.kf-volume-title { font-family: var(--kf-font-display); font-weight: 400; font-size: 1.28rem; line-height: 1.25; margin: .2rem 0 0; }
.kf-volume-title a { color: var(--bs-emphasis-color); text-decoration: none; }
.kf-volume-title a::after { content: ""; position: absolute; inset: 0; } /* the whole volume opens it */
.kf-volume-title a:focus-visible { outline: none !important; }
.kf-volume-by { margin: 0; color: var(--kf-muted); font-size: .92rem; }
.kf-volume-foot { margin-top: auto; padding-top: .8rem; border-top: 1px dashed var(--kf-line); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; font-size: .86rem; color: var(--kf-muted); }
.kf-volume-cites b { font: 800 0.98rem/1 var(--kf-font-figure); color: var(--bs-emphasis-color); }
.kf-volume-disputed { color: var(--kf-madder); }
.kf-volume-scan { display: inline-flex; align-items: center; gap: .3rem; }

.kf-rel { display: inline-flex; align-items: center; gap: .5rem; }
.kf-rel-pips { display: inline-flex; gap: 4px; }
.kf-rel-pips i { width: 9px; height: 9px; transform: rotate(45deg); border: 1.5px solid var(--kf-gold); border-radius: 1px; }
.kf-rel[data-r="low"] .kf-rel-pips i:nth-child(-n+1),
.kf-rel[data-r="medium"] .kf-rel-pips i:nth-child(-n+2),
.kf-rel[data-r="high"] .kf-rel-pips i { background: var(--kf-gold); }
.kf-rel[data-r="unassessed"] .kf-rel-pips i { border-style: dashed; border-color: var(--kf-line-strong); }

/* source detail */
.kf-src-title { display: flex; align-items: flex-start; gap: 1.1rem; min-width: 0; }
.kf-src-seal { width: 3.6rem; height: 3.6rem; margin-top: .3rem; }
.kf-src-seal .kf-icon { width: 1.7rem; height: 1.7rem; }
.kf-src-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: 0 0 1.6rem;
  background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: var(--kf-radius); overflow: hidden;
}
.kf-src-facts > div { padding: .95rem 1.2rem; border-inline-start: 1px solid var(--kf-line); margin-inline-start: -1px; }
.kf-src-facts dt { display: flex; align-items: center; gap: .4rem; font-weight: 400; font-size: .82rem; color: var(--kf-muted); margin-bottom: .35rem; }
.kf-src-facts dt .kf-icon { color: var(--kf-emerald); }
.kf-src-facts dd { margin: 0; font-size: .95rem; }
.kf-src-figure { font: 800 1.64rem/1 var(--kf-font-figure); color: var(--bs-emphasis-color); }
.kf-src-figure.is-disputed { color: var(--kf-madder); }

.kf-cert-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--kf-surface-2); gap: 2px; }
.kf-cert-bar span { min-width: 6px; background: var(--kf-tree-line); }
.kf-cert-bar span[data-c="reported"] { background: color-mix(in srgb, var(--kf-tree-line) 70%, var(--kf-surface)); }
.kf-cert-bar span[data-c="estimated"] { background: color-mix(in srgb, var(--kf-tree-line) 45%, var(--kf-surface)); }
.kf-cert-bar span[data-c="unverified"] { background: var(--kf-spine); }
.kf-cert-bar span[data-c="disputed"] { background: var(--kf-madder); }
.kf-cert-key { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.kf-cert-key li { display: inline-flex; align-items: center; gap: .45rem; }
.kf-cert-key b { font: 800 0.94rem/1 var(--kf-font-figure); color: var(--bs-emphasis-color); }

.kf-folio-page {
  white-space: pre-wrap; line-height: 1.85; font-size: 1.02rem; padding: 1.4rem 1.5rem; border-radius: 4px;
  background: color-mix(in srgb, var(--kf-saffron-tint) 55%, var(--kf-surface));
  box-shadow: inset 0 0 0 1px var(--kf-gold-soft), inset 0 0 0 5px color-mix(in srgb, var(--kf-saffron-tint) 55%, var(--kf-surface)), inset 0 0 0 6px var(--kf-gold-soft);
  max-height: 32rem; overflow: auto;
}

.kf-fact-group + .kf-fact-group { margin-top: 1.4rem; }
.kf-fact-head { display: flex; align-items: center; gap: .55rem; font: 700 0.92rem/1.2 var(--kf-font-label); letter-spacing: .02em; margin: 0 0 .5rem; }
.kf-fact-icon { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 8px; background: var(--kf-verdigris-tint); color: var(--kf-emerald); }
.kf-fact-count { font: 500 .78rem/1 var(--kf-font-mono); color: var(--kf-muted); padding: .2rem .45rem; border-radius: 999px; background: var(--kf-surface-2); }
.kf-cite-list { list-style: none; margin: 0; padding: 0; }
.kf-cite { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .6rem .7rem; border-radius: var(--kf-radius-sm); }
.kf-cite + .kf-cite { border-top: 1px solid var(--kf-line); }
.kf-cite[data-c="disputed"] { background: var(--kf-madder-tint); border-top-color: transparent; }
.kf-cite[data-c="disputed"] + .kf-cite { border-top-color: transparent; }
.kf-cite-main { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.kf-cite-who { font-weight: 700; unicode-bidi: plaintext; text-decoration: none; }
a.kf-cite-who:hover { text-decoration: underline; }
.kf-cite-claim { color: var(--kf-text); font-style: italic; font-size: .94rem; }
.kf-cite-side { display: flex; align-items: center; gap: .8rem; font-size: .84rem; color: var(--kf-muted); }
.kf-dl--stack { grid-template-columns: 1fr; gap: .1rem; }
.kf-dl--stack dd { margin-bottom: .7rem; }
@media (prefers-reduced-motion: reduce) { .kf-volume { transition: none; } .kf-volume:hover { transform: none; } }

/* ================================================================ DIRECTORY GLANCE
 * Where the family lives, drawn as a compass whose centre is the eight-point
 * star: one spoke per country, longer and heavier for more members. The
 * list beside it carries the same figures for screen readers.
 */
.kf-glance { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.25rem; margin-bottom: 2rem; }
@media (max-width: 991.98px) { .kf-glance { grid-template-columns: 1fr; } }
.kf-glance-compass, .kf-glance-block { background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: var(--kf-radius); padding: 1.2rem 1.3rem; }
.kf-glance-compass {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(9rem, 1fr); grid-template-areas: "head head" "svg list" "note note"; gap: .4rem 1.2rem; align-items: center;
  background: radial-gradient(circle at 36% 58%, var(--kf-saffron-tint), transparent 62%), var(--kf-surface);
}
@media (max-width: 575.98px) { .kf-glance-compass { grid-template-columns: 1fr; grid-template-areas: "head" "svg" "list" "note"; } }
.kf-glance-head { grid-area: head; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.kf-glance-head .kf-eyebrow { margin: 0; }
.kf-glance-figure { margin: 0; color: var(--kf-muted); font-size: .9rem; }
.kf-glance-figure b { font: 800 1.56rem/1 var(--kf-font-figure); color: var(--bs-emphasis-color); }
.kf-compass { grid-area: svg; width: 100%; height: auto; max-height: 260px; overflow: visible; }
.kf-compass-ring { fill: none; stroke: var(--kf-gold-soft); stroke-width: 1; stroke-dasharray: 2 4; }
.kf-compass-spoke { stroke: var(--kf-emerald); stroke-width: 1.6; stroke-linecap: round; }
.kf-compass-star rect { fill: var(--kf-gold); }
.kf-compass-star circle { fill: var(--kf-surface); }
.kf-compass-dot { fill: var(--kf-emerald); stroke: var(--kf-surface); stroke-width: 2; }
.kf-compass-label { font: 600 10.5px var(--kf-font-body); fill: var(--kf-text); }
.kf-glance-list { grid-area: list; list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.kf-glance-list li { display: flex; justify-content: space-between; gap: .8rem; padding: .3rem 0; border-bottom: 1px dashed var(--kf-line); }
.kf-glance-list b { font: 800 0.86rem/1.2 var(--kf-font-figure); color: var(--bs-emphasis-color); }
.kf-glance-note { grid-area: note; margin: .3rem 0 0; font-size: .8rem; color: var(--kf-muted); }
.kf-glance-side { display: grid; gap: 1.25rem; align-content: start; }
.kf-glance-bars { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .55rem; }
.kf-glance-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem; font-size: .9rem; }
.kf-glance-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-glance-bars b { font: 800 0.86rem/1.2 var(--kf-font-figure); color: var(--bs-emphasis-color); }
.kf-glance-track { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--kf-surface-2); overflow: hidden; }
.kf-glance-track i { display: block; height: 100%; border-radius: inherit; background: var(--bc, var(--kf-emerald)); }
.kf-glance-gens { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; align-items: flex-end; gap: 6px; min-height: 96px; overflow-x: auto; overflow-y: hidden; }
.kf-glance-gens li { flex: 1 0 22px; max-width: 46px; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.kf-glance-col { width: 100%; height: 60px; display: flex; align-items: flex-end; }
.kf-glance-col i { display: block; width: 100%; min-height: 3px; border-radius: 4px 4px 1px 1px; background: linear-gradient(var(--kf-gold), var(--kf-emerald)); }
.kf-glance-gens b { font: 800 0.78rem/1 var(--kf-font-figure); color: var(--bs-emphasis-color); }
.kf-glance-gen { font: 500 .7rem/1 var(--kf-font-mono); color: var(--kf-muted); }

/* hero art: a slow twinkle and drifting lamplight; still when motion is reduced */
@keyframes ha-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ha-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ha-wave { 0%, 100% { transform: skewY(0deg); } 50% { transform: skewY(-2deg); } }
.kf-hero-art .ha-twinkle { animation: ha-twinkle 4.5s ease-in-out infinite; transform-box: fill-box; }
.kf-hero-art .ha-float { animation: ha-float 7s ease-in-out infinite; }
.kf-hero-art .ha-flag { animation: ha-wave 6s ease-in-out infinite; transform-origin: 180px 180px; }
.kf-hero-art .ha-d2 { animation-delay: -1.6s; }
.kf-hero-art .ha-d3 { animation-delay: -3.1s; }
@media (prefers-reduced-motion: reduce) { .kf-hero-art .ha-twinkle, .kf-hero-art .ha-float, .kf-hero-art .ha-flag { animation: none; } }

/* the way back up: a breadcrumb along the line of descent */
.kf-trail { margin-bottom: 1rem; }
.kf-trail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .9rem; }
.kf-trail li { display: inline-flex; align-items: center; gap: .3rem; color: var(--kf-muted); }
.kf-trail li + li::before {
  content: ""; width: .6rem; height: .6rem; flex: none; background: var(--kf-gold);
  -webkit-mask: var(--kf-orn-star) center / contain no-repeat; mask: var(--kf-orn-star) center / contain no-repeat;
}
.kf-trail a { text-decoration: none; unicode-bidi: plaintext; }
.kf-trail a:hover { text-decoration: underline; }
.kf-trail li[aria-current] { color: var(--kf-text); font-weight: 700; unicode-bidi: plaintext; }
.kf-trail-fold a { padding: .05rem .55rem; border-radius: 999px; border: 1px dashed var(--kf-line-strong); color: var(--kf-muted); font-size: .8rem; }

/* ================================================================ SIGN IN / JOIN
 * Split screen after the Noor sign-in: the shrine at night with the family
 * emblem stamped in gold on one side, a calm card with a green and gold band
 * on the other. On phones the night panel becomes a short banner.
 */
.kf-auth { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); min-height: calc(100vh - var(--kf-header-h)); }
.kf-auth-hero { position: relative; overflow: hidden; isolation: isolate; background: #132841; color: #fff; display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; }
.kf-auth-art { position: absolute; inset: 0; z-index: -2; opacity: .5; }
.kf-auth-art .kf-hero-art { width: 100%; height: 100%; display: block; }
.kf-auth-hero::after { /* quiets the scene behind the emblem so the brand reads first */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(10, 22, 38, .82), rgba(10, 22, 38, .55) 60%, rgba(10, 22, 38, .35)),
    linear-gradient(180deg, transparent 60%, rgba(10, 22, 38, .85));
}
.kf-auth-brand { max-width: 22rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.kf-auth-seal { position: relative; display: block; width: clamp(9rem, 16vw, 13.5rem); }
.kf-auth-seal::before { content: ""; position: absolute; inset: -2.5rem; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 128, .42) 0%, rgba(255, 214, 128, .12) 45%, transparent 70%); }
.kf-auth-seal img { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .45)); animation: kf-stamp .6s cubic-bezier(.2, .8, .2, 1) both; }
.kf-auth-eyebrow { margin: 1.4rem 0 0; font: 500 .74rem/1.4 var(--kf-font-mono); letter-spacing: .2em; text-transform: uppercase; color: #ffe2a8; animation: kf-rise .5s .2s ease-out both; }
:lang(bn) .kf-auth-eyebrow, :lang(ar) .kf-auth-eyebrow { text-transform: none; letter-spacing: .02em; font-family: var(--kf-font-body); font-size: .9rem; }
.kf-auth-tagline { margin: .7rem 0 0; font-family: var(--kf-font-display); font-size: 1.35rem; line-height: 1.3; color: #fff; text-wrap: balance; animation: kf-rise .5s .28s ease-out both; }
.kf-auth-points { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .55rem; text-align: start; font-size: .92rem; color: rgba(255, 255, 255, .86); animation: kf-rise .5s .36s ease-out both; }
.kf-auth-points li { display: flex; gap: .6rem; align-items: baseline; }
.kf-auth-points li::before {
  content: ""; flex: none; width: .8rem; height: .8rem; transform: translateY(.1rem); background: #f2c460;
  -webkit-mask: var(--kf-orn-star) center / contain no-repeat; mask: var(--kf-orn-star) center / contain no-repeat;
}
.kf-auth-panel { display: flex; align-items: safe center; justify-content: center; padding: 3rem 1.5rem; background: radial-gradient(circle at 85% 0%, var(--kf-saffron-tint), transparent 45%), var(--kf-bg); }
.kf-auth-inner { width: 100%; max-width: 26rem; }
.kf-auth-inner--wide { max-width: 40rem; }
.kf-auth-card { background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(20, 28, 40, .05), 0 18px 48px -18px rgba(20, 28, 40, .28); animation: kf-rise .5s .3s ease-out both; }
.kf-auth-band { height: 4px; background: linear-gradient(90deg, var(--kf-emerald), var(--kf-gold) 50%, var(--kf-emerald)); }
.kf-auth-body { padding: 1.8rem 1.8rem 1.6rem; }
.kf-auth-body h1 { font-size: clamp(1.8rem, 1.5rem + 1vw, 2.2rem); margin: 0 0 .4rem; }
.kf-auth-lede { color: var(--kf-muted); font-size: .95rem; margin: 0 0 1.4rem; }
.kf-auth-forgot { text-align: end; margin: -.4rem 0 1rem; font-size: .9rem; }
.kf-auth-submit, .kf-auth-alt { width: 100%; display: flex; justify-content: center; }
.kf-auth-submit { margin-top: .4rem; }
.kf-auth-or { display: flex; align-items: center; gap: .8rem; margin: 1.4rem 0 1rem; color: var(--kf-muted); font-size: .85rem; }
.kf-auth-or::before, .kf-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--kf-line); }
.kf-auth-steps { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; font-size: .85rem; color: var(--kf-muted); }
.kf-auth-steps li { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .8rem .25rem .3rem; border-radius: 999px; border: 1px solid var(--kf-line); }
.kf-auth-steps b { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--kf-surface-2); font: 800 0.74rem/1 var(--kf-font-figure); }
.kf-auth-steps li[aria-current] { color: var(--kf-text); border-color: var(--kf-gold-soft); background: var(--kf-saffron-tint); font-weight: 700; }
.kf-auth-steps li[aria-current] b { background: var(--kf-emerald); color: #fff; }
.kf-auth-section { border: 0; padding: 0; margin: 0 0 1.2rem; }
.kf-auth-section + .kf-auth-section { padding-top: 1.2rem; border-top: 1px dashed var(--kf-line); }
.kf-auth-section legend { float: none; display: flex; align-items: center; gap: .5rem; font: 700 0.97rem/1.2 var(--kf-font-label); margin-bottom: .8rem; }
.kf-auth-section legend .kf-icon { color: var(--kf-emerald); }
.kf-auth-hint { font-size: .86rem; color: var(--kf-muted); margin: -.3rem 0 .8rem; }
.kf-reveal { position: relative; }
.kf-reveal .form-control { padding-inline-end: 3rem; }
.kf-reveal-btn {
  position: absolute; inset-block: 0; inset-inline-end: 0; width: 2.9rem; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--kf-muted); border-radius: var(--kf-radius-sm);
}
.kf-reveal-btn:hover { color: var(--kf-text); }
.kf-reveal-btn[aria-pressed="false"] .kf-reveal-slash { display: none; }
@media (min-width: 992px) { /* a long form scrolls past a night panel that stays put */
  .kf-auth { align-items: start; }
  .kf-auth-hero { position: sticky; top: var(--kf-header-h); height: calc(100vh - var(--kf-header-h)); }
  .kf-auth-panel { min-height: calc(100vh - var(--kf-header-h)); }
}
@keyframes kf-stamp { 0% { opacity: 0; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes kf-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kf-auth-seal img, .kf-auth-eyebrow, .kf-auth-tagline, .kf-auth-points, .kf-auth-card { animation: none; } }
@media (max-width: 991.98px) {
  .kf-auth { grid-template-columns: 1fr; min-height: 0; }
  .kf-auth-hero { padding: 2rem 1.25rem 1.6rem; }
  .kf-auth-seal { width: 7.5rem; }
  .kf-auth-tagline { font-size: 1.1rem; }
  .kf-auth-points { display: none; }
  .kf-auth-panel { padding: 1.5rem 1rem 3rem; }
  .kf-auth-body { padding: 1.4rem 1.2rem 1.3rem; }
}

/* ================================================================ NOT FOUND
 * A chain of descent with one star missing: the record we can't show.
 */
.kf-lost { max-width: 40rem; margin: 1rem auto 0; text-align: center; }
.kf-lost-art { display: block; width: min(100%, 320px); height: auto; margin: 0 auto 1.4rem; overflow: visible; }
.kf-lost-line { stroke: var(--kf-line-strong); stroke-width: 2; }
.kf-lost-gap { stroke: var(--kf-gold); stroke-width: 2; stroke-dasharray: 3 6; stroke-linecap: round; }
.kf-lost-star rect { fill: var(--kf-emerald); }
.kf-lost-star--missing rect { fill: none; stroke: var(--kf-gold); stroke-width: 1.6; stroke-dasharray: 4 4; }
.kf-lost h1 { font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.35rem); margin: 0 0 .6rem; text-wrap: balance; }
.kf-lost-lede { color: var(--kf-muted); font-size: 1.05rem; margin: 0 auto 1.2rem; max-width: 34rem; }
.kf-lost-reasons {
  list-style: none; margin: 0 auto 1.6rem; padding: 1rem 1.2rem; max-width: 34rem; text-align: start; display: grid; gap: .55rem;
  background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: var(--kf-radius); font-size: .95rem;
}
.kf-lost-reasons li { display: flex; gap: .6rem; align-items: baseline; }
.kf-lost-reasons li::before {
  content: ""; flex: none; width: .75rem; height: .75rem; transform: translateY(.08rem); background: var(--kf-gold);
  -webkit-mask: var(--kf-orn-star) center / contain no-repeat; mask: var(--kf-orn-star) center / contain no-repeat;
}
.kf-lost-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: 1.8rem; }
.kf-lost-actions:empty { display: none; }
.kf-lost-search { max-width: 30rem; margin: 0 auto 1.6rem; text-align: start; }
.kf-lost-search .form-label { font-weight: 700; font-size: .95rem; }
.kf-lost-search-row { display: flex; gap: .5rem; }
.kf-lost-search-row .form-control { flex: 1; min-width: 0; }

/* ================================================================ PERSON PROFILE
 * In the colours of the family emblem: night navy, shrine green, illumination
 * gold and crescent cream. The banner is the emblem's night sky, with the
 * portrait in its onion-arch frame; below it, lineage figures and the family
 * in four colour-coded groups.
 */
:root {
  --kf-night: #0F2236; --kf-night-2: #143A5A; --kf-shrine: #145C3B; --kf-cream: #FFF3D2;
  --kf-teal: #1D6A70; --kf-gold-ink: #8C5A1E;
  --kf-orn-ogee: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath d='M50 0C56 12 70 19 82 28C96 39 100 55 100 70A50 50 0 0 1 0 70C0 55 4 39 18 28C30 19 44 12 50 0Z'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kf-teal: #6CC5CC; --kf-gold-ink: #E2B65E; } }
:root[data-theme="dark"] { --kf-teal: #6CC5CC; --kf-gold-ink: #E2B65E; }

.kf-avatar--xl { --size: 128px; }

.kf-ph {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; color: var(--kf-cream);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "portrait id tree"; align-items: center; gap: 1.2rem 2rem;
  padding: 2rem 2.2rem 2.6rem;
  background:
    radial-gradient(circle at 9% 50%, rgba(242, 196, 96, .28), transparent 26%),
    radial-gradient(circle at 92% 18%, rgba(255, 243, 210, .12), transparent 22%),
    linear-gradient(125deg, var(--kf-night) 0%, var(--kf-night-2) 55%, var(--kf-shrine) 100%);
  box-shadow: 0 24px 48px -28px rgba(15, 34, 54, .7);
}
.kf-ph::before { /* jali lattice */
  content: ""; position: absolute; inset: 0; z-index: -1; background: #f2c460; opacity: .1; pointer-events: none;
  -webkit-mask: var(--kf-orn-jali) 0 0 / 44px 44px; mask: var(--kf-orn-jali) 0 0 / 44px 44px;
}
.kf-ph::after { /* a gold kangura parapet along the bottom edge */
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 12px; background: linear-gradient(90deg, #a8741f, #f2c460 50%, #a8741f); opacity: .9; pointer-events: none;
  -webkit-mask: var(--kf-orn-kangura) 0 100% / 24px 12px repeat-x; mask: var(--kf-orn-kangura) 0 100% / 24px 12px repeat-x;
}
.kf-ph-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.kf-ph-moon { position: absolute; top: 1.1rem; inset-inline-end: 1.4rem; width: 54px; height: 54px; fill: var(--kf-cream); opacity: .9; filter: drop-shadow(0 0 14px rgba(255, 243, 210, .45)); }
.kf-ph-star { position: absolute; left: var(--x); top: var(--y); width: 9px; height: 9px; background: #ffe9b8; opacity: .8;
  -webkit-mask: var(--kf-orn-star) center / contain no-repeat; mask: var(--kf-orn-star) center / contain no-repeat; }
[dir="rtl"] .kf-ph-star { left: auto; right: var(--x); }

.kf-ph-portrait {
  grid-area: portrait; width: 132px; aspect-ratio: 100 / 120; padding: 4px;
  background: linear-gradient(160deg, #ffe7a3, #e2ad48 45%, #a8741f);
  -webkit-mask: var(--kf-orn-ogee) center / 100% 100% no-repeat; mask: var(--kf-orn-ogee) center / 100% 100% no-repeat;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35));
}
.kf-ph-portrait .kf-avatar {
  width: 100%; height: 100%; border: 0; border-radius: 0; font-size: 2.6rem; color: var(--kf-cream);
  background: radial-gradient(circle at 50% 35%, #2a9d66, var(--kf-shrine) 70%);
  -webkit-mask: var(--kf-orn-ogee) center / 100% 100% no-repeat; mask: var(--kf-orn-ogee) center / 100% 100% no-repeat;
}
.kf-ph:not(.is-living) .kf-ph-portrait .kf-avatar { background: radial-gradient(circle at 50% 35%, #2b5a86, var(--kf-night) 75%); }
.kf-ph-portrait .kf-avatar img { object-position: center 30%; }

.kf-ph-id { grid-area: id; min-width: 0; }
.kf-ph-eyebrow { display: block; font: 500 .74rem/1.3 var(--kf-font-mono); letter-spacing: .18em; text-transform: uppercase; color: #f2c460; margin-bottom: .45rem; }
.kf-ph h1 { color: #fff8e6; font-size: clamp(2rem, 1.5rem + 1.8vw, 2.8rem); line-height: 1.12; margin: 0; text-wrap: balance; }
.kf-ph-native { color: rgba(255, 243, 210, .82); font-size: 1.25rem; margin-top: .25rem; }
.kf-ph-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.kf-ph-chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .75rem; border-radius: 999px; font-size: .84rem; font-weight: 700;
  color: var(--kf-cream); background: rgba(255, 255, 255, .08); border: 1px solid rgba(242, 196, 96, .35); text-decoration: none;
  backdrop-filter: blur(4px);
}
.kf-ph-chip .kf-icon { color: #f2c460; }
a.kf-ph-chip:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.kf-ph-chip--years { font: 500 .84rem/1.4 var(--kf-font-mono); }
.kf-ph-chip--gold { background: #e2ad48; border-color: #e2ad48; color: var(--kf-night); }
a.kf-ph-chip--gold:hover { background: #f2c460; color: var(--kf-night); }
.kf-ph-chip--living { background: rgba(42, 157, 102, .35); border-color: rgba(95, 191, 149, .6); }
.kf-ph-chip--warn { background: rgba(224, 138, 42, .3); border-color: rgba(242, 196, 96, .7); }

.kf-ph-tree { grid-area: tree; display: flex; flex-direction: column; gap: .5rem; align-self: end; }
.kf-ph-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .4rem .85rem; border-radius: 10px; font-weight: 700; font-size: .9rem;
  color: var(--kf-cream); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 243, 210, .28); text-decoration: none; white-space: nowrap;
}
.kf-ph-btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.kf-ph-btn--gold { background: linear-gradient(180deg, #f2c460, #d9a03a); border-color: #f2c460; color: var(--kf-night); }
.kf-ph-btn--gold:hover { background: linear-gradient(180deg, #ffd77a, #e2ad48); color: var(--kf-night); }
.kf-ph :focus-visible { outline-color: #ffe2a8 !important; }

.kf-ph-figures {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
  margin: -1.6rem 1.6rem 1.6rem;
}
.kf-fig {
  --fc: var(--kf-emerald);
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon value" "icon label"; align-items: center; gap: 0 .85rem;
  padding: .95rem 1.1rem; border-radius: 16px; background: var(--kf-surface); border: 1px solid var(--kf-line);
  box-shadow: 0 1px 2px rgba(20, 28, 40, .06), 0 12px 28px -18px rgba(20, 28, 40, .35);
  border-top: 3px solid var(--fc);
}
.kf-fig--navy { --fc: var(--kf-lapis); } .kf-fig--gold { --fc: var(--kf-gold); }
.kf-fig--emerald { --fc: var(--kf-emerald); } .kf-fig--teal { --fc: var(--kf-teal); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kf-fig--navy { --fc: #9DBBE3; } }
:root[data-theme="dark"] .kf-fig--navy { --fc: #9DBBE3; }
.kf-fig-icon {
  grid-area: icon; display: inline-grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 14px; color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--fc) 70%, #fff), var(--fc) 55%, color-mix(in srgb, var(--fc) 75%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 14px -6px var(--fc);
}
.kf-fig-icon .kf-icon { width: 1.35rem; height: 1.35rem; }
.kf-fig dt { grid-area: label; font-weight: 400; font-size: .84rem; color: var(--kf-muted); }
.kf-fig dd { grid-area: value; margin: 0; font: 800 1.64rem/1 var(--kf-font-figure); color: var(--bs-emphasis-color); }
.kf-fig dd a { color: inherit; text-decoration: none; }
.kf-fig dd a:hover { text-decoration: underline; }

.kf-ph-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.6rem; }

.kf-psec { border-radius: 18px; }
.kf-psec-head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.kf-psec-head h2 { margin: 0; font: 700 1.23rem/1.2 var(--kf-font-label); letter-spacing: .01em; }
.kf-psec-icon {
  --pc: var(--kf-emerald);
  display: inline-grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem; border-radius: 11px; color: var(--pc);
  background: color-mix(in srgb, var(--pc) 14%, var(--kf-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 28%, transparent);
}
.kf-psec-icon--gold { --pc: var(--kf-gold-ink); } .kf-psec-icon--teal { --pc: var(--kf-teal); } .kf-psec-icon--navy { --pc: var(--kf-primary); }
.kf-psec-key, .kf-psec-figure { margin-inline-start: auto; }
.kf-psec-key { gap: 1rem; }
.kf-psec-figure { font: 800 1.31rem/1 var(--kf-font-figure); color: var(--bs-emphasis-color); }

.kf-kin-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.kf-kin {
  --kc: var(--kf-emerald);
  border-radius: 14px; padding: .85rem 1rem .6rem; border: 1px solid color-mix(in srgb, var(--kc) 22%, var(--kf-line));
  border-top: 3px solid var(--kc); background: color-mix(in srgb, var(--kc) 5%, var(--kf-surface));
}
.kf-kin--navy { --kc: var(--kf-primary); } .kf-kin--gold { --kc: var(--kf-gold-ink); }
.kf-kin--emerald { --kc: var(--kf-emerald); } .kf-kin--teal { --kc: var(--kf-teal); }
.kf-kin-head { display: flex; align-items: center; gap: .45rem; margin: 0 0 .35rem; font: 700 0.9rem/1.2 var(--kf-font-label); letter-spacing: .03em; color: var(--kf-text); }
.kf-kin-head .kf-icon { color: var(--kc); }
.kf-kin-head b { margin-inline-start: auto; min-width: 1.6rem; padding: .15rem .45rem; border-radius: 999px; text-align: center; font: 800 0.78rem/1 var(--kf-font-figure); color: var(--kc); background: color-mix(in srgb, var(--kc) 14%, var(--kf-surface)); }
.kf-kin .kf-person-row { border-top-color: color-mix(in srgb, var(--kc) 16%, var(--kf-line)); }
.kf-kin .kf-avatar { border: 0; box-shadow: 0 0 0 2px var(--kf-surface), 0 0 0 3.5px var(--kc); }
.kf-kin-empty { margin: .2rem 0 .4rem; font-size: .88rem; color: var(--kf-muted); font-style: italic; }

.kf-facts { margin: 0; }
.kf-facts > div { padding: .65rem 0; border-top: 1px dashed var(--kf-line); }
.kf-facts > div:first-child { border-top: 0; padding-top: 0; }
.kf-facts dt { display: flex; align-items: center; gap: .45rem; font-weight: 400; font-size: .82rem; color: var(--kf-muted); margin-bottom: .15rem; }
.kf-facts dt .kf-icon { color: var(--kf-gold-ink); }
.kf-facts dd { margin: 0; font-size: 1rem; }
.kf-facts-private { display: flex; align-items: center; gap: .45rem; margin: .9rem 0 0; padding: .55rem .75rem; border-radius: 10px; font-size: .85rem; color: var(--kf-muted); background: var(--kf-surface-2); }

.kf-claim { border-inline-start: 3px solid var(--kf-tree-line); }
.kf-claim[data-c="disputed"] { border-inline-start-color: var(--kf-madder); }
.kf-claim[data-c="unverified"] { border-inline-start-color: var(--kf-spine); }
.kf-meter--gold { height: 10px; border-radius: 999px; background: var(--kf-surface-2); box-shadow: inset 0 0 0 1px var(--kf-line); }
.kf-meter--gold > span { border-radius: inherit; background: linear-gradient(90deg, var(--kf-gold), var(--kf-emerald)); }

@media (max-width: 991.98px) {
  .kf-ph { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "portrait id" "tree tree"; }
  .kf-ph-tree { flex-direction: row; flex-wrap: wrap; align-self: start; }
  .kf-ph-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 1rem; }
}
@media (max-width: 575.98px) {
  .kf-ph { grid-template-columns: 1fr; grid-template-areas: "portrait" "id" "tree"; justify-items: center; text-align: center; padding: 1.6rem 1.1rem 2.4rem; }
  .kf-ph-portrait { width: 108px; }
  .kf-ph-chips, .kf-ph-tree { justify-content: center; }
  .kf-ph-moon { width: 38px; height: 38px; }
  .kf-ph-figures { margin-inline: .5rem; gap: .6rem; }
  .kf-fig { padding: .75rem .8rem; gap: 0 .6rem; }
  .kf-fig-icon { width: 2.4rem; height: 2.4rem; }
  .kf-fig dd { font-size: 1.6rem; }
}
@media print {
  .kf-ph { background: none; color: #000; box-shadow: none; border: 1px solid #999; }
  .kf-ph::before, .kf-ph::after, .kf-ph-sky, .kf-ph-tree, .kf-ph-actions { display: none !important; }
  .kf-ph h1, .kf-ph-native, .kf-ph-chip { color: #000; }
}

/* the light / dark switch in the header */
.kf-theme-toggle .kf-theme-sun { display: none; }
.kf-theme-toggle[aria-pressed="true"] .kf-theme-sun { display: block; }
.kf-theme-toggle[aria-pressed="true"] .kf-theme-moon { display: none; }

/* ================================================================ DIRECTORY
 * The same night sky as the profile banner. Members are cards with a
 * branch-coloured night strip, the portrait in the emblem's onion arch, and
 * the facts they chose to share.
 */
.kf-dir-hero {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; color: var(--kf-cream);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem 2rem; margin-bottom: 1.8rem;
  padding: 2.2rem 2.4rem 2.8rem;
  background:
    radial-gradient(circle at 88% 20%, rgba(255, 243, 210, .12), transparent 24%),
    linear-gradient(125deg, var(--kf-night) 0%, var(--kf-night-2) 55%, var(--kf-shrine) 100%);
  box-shadow: 0 24px 48px -28px rgba(15, 34, 54, .7);
}
.kf-dir-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #f2c460; opacity: .1; pointer-events: none;
  -webkit-mask: var(--kf-orn-jali) 0 0 / 44px 44px; mask: var(--kf-orn-jali) 0 0 / 44px 44px; }
.kf-dir-hero::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 12px; opacity: .9; pointer-events: none;
  background: linear-gradient(90deg, #a8741f, #f2c460 50%, #a8741f);
  -webkit-mask: var(--kf-orn-kangura) 0 100% / 24px 12px repeat-x; mask: var(--kf-orn-kangura) 0 100% / 24px 12px repeat-x; }
.kf-dir-hero h1 { color: #fff8e6; font-size: clamp(2rem, 1.5rem + 1.8vw, 2.8rem); margin: 0 0 .5rem; }
.kf-dir-hero p { color: rgba(255, 243, 210, .82); max-width: 40rem; margin: 0 0 1.3rem; }
.kf-dir-search {
  position: relative; display: flex; max-width: 28rem; border-radius: 10px; overflow: hidden;
  background: rgba(255, 255, 255, .96); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5);
}
.kf-dir-search .kf-icon { position: absolute; inset-inline-start: .8rem; top: 50%; transform: translateY(-50%); color: #556170; }
.kf-dir-search input { flex: 1; min-width: 0; border: 0; padding: .5rem .8rem; padding-inline-start: 2.3rem; font-size: .95rem; color: #141c28; background: transparent; }
.kf-dir-search input:focus { outline: none; }
.kf-dir-search:focus-within { outline: 3px solid #ffe2a8; outline-offset: 2px; }
.kf-dir-search button { border: 0; padding: 0 1rem; font-size: .92rem; font-weight: 700; color: var(--kf-night); background: linear-gradient(180deg, #f2c460, #d9a03a); }
.kf-dir-search button:hover { background: linear-gradient(180deg, #ffd77a, #e2ad48); }
.kf-dir-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: .8rem; }
.kf-dir-total { margin: 0; color: rgba(255, 243, 210, .8); font-size: .95rem; text-align: end; }
.kf-dir-total b { display: block; font: 800 2.3rem/1 var(--kf-font-figure); color: #f2c460; }

.kf-dir-filters { background: var(--kf-surface); border: 1px solid var(--kf-line); border-top: 3px solid var(--kf-gold); border-radius: 16px; padding: 1.1rem 1.2rem 1.2rem; }
.kf-dir-filters-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.kf-dir-filters-head h2 { margin: 0; font: 700 1.1rem/1.2 var(--kf-font-label); }
.kf-dir-filters .form-label { font-size: .88rem; }
.kf-dir-filters .kf-optional { display: none; }

.kf-dir-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; }
.kf-dir-count { margin: 0; font-weight: 700; color: var(--kf-text); }
.kf-dir-active { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.kf-dir-active li { display: inline-flex; align-items: center; gap: .2rem; padding: .2rem .25rem .2rem .7rem; border-radius: 999px; font-size: .85rem; background: var(--kf-saffron-tint); border: 1px solid var(--kf-gold-soft); }
.kf-dir-active a { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; color: var(--kf-text); }
.kf-dir-active a:hover { background: color-mix(in srgb, var(--kf-gold) 25%, transparent); }
.kf-dir-active .kf-icon { width: .9rem; height: .9rem; }

.kf-dir-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr)); }
.kf-dir-card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 1.1rem 1rem;
  background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: 18px; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kf-dir-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--bc, var(--kf-gold)) 45%, var(--kf-line)); box-shadow: 0 18px 36px -22px rgba(15, 34, 54, .55); }
.kf-dir-card:has(a:focus-visible) { outline: 3px solid var(--kf-focus); outline-offset: 2px; }
.kf-dir-cover {
  align-self: stretch; height: 70px; margin: 0 -1.1rem; position: relative;
  background: linear-gradient(125deg, var(--kf-night), var(--kf-night-2) 60%, color-mix(in srgb, var(--bc, var(--kf-shrine)) 70%, var(--kf-night)));
}
.kf-dir-cover::before { content: ""; position: absolute; inset: 0; background: #f2c460; opacity: .12;
  -webkit-mask: var(--kf-orn-jali) 0 0 / 30px 30px; mask: var(--kf-orn-jali) 0 0 / 30px 30px; }
.kf-dir-cover::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--bc, var(--kf-gold)); }
.kf-dir-portrait {
  width: 78px; aspect-ratio: 100 / 120; margin-top: -46px; padding: 3px; position: relative;
  background: linear-gradient(160deg, #ffe7a3, #e2ad48 45%, #a8741f);
  -webkit-mask: var(--kf-orn-ogee) center / 100% 100% no-repeat; mask: var(--kf-orn-ogee) center / 100% 100% no-repeat;
}
.kf-dir-portrait .kf-avatar {
  width: 100%; height: 100%; border: 0; border-radius: 0; font-size: 1.5rem; color: var(--kf-cream);
  background: radial-gradient(circle at 50% 35%, #2a9d66, var(--kf-shrine) 70%);
  -webkit-mask: var(--kf-orn-ogee) center / 100% 100% no-repeat; mask: var(--kf-orn-ogee) center / 100% 100% no-repeat;
}
.kf-dir-name { margin: .6rem 0 0; font: 700 1.08rem/1.3 var(--kf-font-body); }
.kf-dir-name a { color: var(--bs-emphasis-color); text-decoration: none; unicode-bidi: plaintext; }
.kf-dir-name a::after { content: ""; position: absolute; inset: 0; } /* the whole card opens the profile */
.kf-dir-name a:focus-visible { outline: none !important; }
.kf-dir-native { margin: .1rem 0 0; color: var(--kf-muted); font-size: .95rem; }
.kf-dir-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: .6rem; }
.kf-dir-tag { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.kf-dir-tag--gen { color: var(--kf-gold-ink); background: var(--kf-saffron-tint); }
.kf-dir-tag--gen .kf-icon { width: .85rem; height: .85rem; }
.kf-dir-tag--branch { color: var(--kf-text); background: color-mix(in srgb, var(--bc, var(--kf-line)) 16%, var(--kf-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc, var(--kf-line)) 40%, transparent); }
.kf-dir-lines { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .2rem; font-size: .88rem; color: var(--kf-muted); }
.kf-dir-lines li { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.kf-dir-lines .kf-icon { color: var(--kf-emerald); width: 1rem; height: 1rem; }
.kf-dir-open { margin-top: auto; padding-top: .9rem; display: inline-flex; align-items: center; gap: .2rem; font-size: .85rem; font-weight: 700; color: var(--kf-link); }
.kf-dir-open .kf-icon { width: .9rem; height: .9rem; transition: transform .2s ease; }
.kf-dir-card:hover .kf-dir-open .kf-icon { transform: translateX(3px); }
[dir="rtl"] .kf-dir-open .kf-icon { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .kf-dir-card, .kf-dir-open .kf-icon { transition: none; } .kf-dir-card:hover { transform: none; } }
@media (max-width: 767.98px) {
  .kf-dir-hero { grid-template-columns: 1fr; padding: 1.7rem 1.2rem 2.4rem; }
  .kf-dir-hero-side { flex-direction: row; align-items: center; justify-content: space-between; }
  .kf-dir-total { text-align: start; }
  .kf-dir-total b { font-size: 2.6rem; }
}
@media print { .kf-dir-hero, .kf-dir-filters { display: none !important; } }

/* ================================================================ TIMELINE (night banner, century axis, generation ladder)
 * Dates are rare in the family book, so the ladder of generations is the
 * body of the page; a century scale shows where the few known dates fall.
 */
.kf-tl-hero { align-items: end; }
.kf-tl-filter { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .4rem .4rem .4rem .9rem; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(242, 196, 96, .35); }
.kf-tl-filter label { font-size: .88rem; font-weight: 700; color: #ffe2a8; }
.kf-tl-filter select { border: 0; border-radius: 8px; padding: .35rem .6rem; font-size: .92rem; min-width: 11rem; background: rgba(255, 255, 255, .95); color: #141c28; }
.kf-tl-filter button { border: 0; border-radius: 8px; padding: .35rem .9rem; font-size: .92rem; font-weight: 700; color: var(--kf-night); background: linear-gradient(180deg, #f2c460, #d9a03a); }
.kf-tl-figs { display: flex; gap: 1.6rem; margin: 0; }
.kf-tl-figs div { display: flex; flex-direction: column-reverse; align-items: flex-end; text-align: end; }
.kf-tl-figs dd { margin: 0; font: 800 2.46rem/1 var(--kf-font-figure); color: #f2c460; }
.kf-tl-figs dt { font-weight: 400; font-size: .82rem; color: rgba(255, 243, 210, .78); max-width: 8rem; }
@media (max-width: 767.98px) { .kf-tl-figs { justify-content: space-between; } .kf-tl-figs div { align-items: flex-start; text-align: start; } .kf-tl-figs dd { font-size: 2.3rem; } }

/* the century axis */
.kf-tl-dates { margin-bottom: 1.6rem; }
.kf-tl-legend { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--kf-muted); }
.kf-tl-dot { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; margin-inline-start: .5rem; }
.kf-tl-dot--born { background: var(--kf-emerald); }
.kf-tl-dot--died { background: var(--kf-gold); border-radius: 2px; transform: rotate(45deg); }
.kf-tl-axis { position: relative; margin: .4rem .6rem 1.4rem; }
.kf-tl-lanes {
  position: relative; height: 66px; border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--kf-saffron-tint) 60%, var(--kf-surface)), var(--kf-surface));
  box-shadow: inset 0 0 0 1px var(--kf-line);
}
.kf-tl-lanes::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--kf-emerald), var(--kf-gold)); }
.kf-tl-pin {
  position: absolute; left: var(--x); top: calc(12px + var(--lane) * 16px); width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: var(--kf-emerald); box-shadow: 0 0 0 2px var(--kf-surface); transition: transform .15s ease;
}
.kf-tl-pin.is-died { background: var(--kf-gold); border-radius: 2px; transform: rotate(45deg); }
.kf-tl-pin:hover { transform: scale(1.5); }
.kf-tl-pin.is-died:hover { transform: rotate(45deg) scale(1.5); }
.kf-tl-scale { position: relative; height: 1.6rem; }
.kf-tl-scale span { position: absolute; left: var(--x); top: .35rem; transform: translateX(-50%); font: 500 .74rem/1 var(--kf-font-mono); color: var(--kf-muted); }
.kf-tl-scale span::before { content: ""; position: absolute; left: 50%; top: -.55rem; height: .4rem; border-left: 1px solid var(--kf-line-strong); }
.kf-tl-decades { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.kf-tl-decades > li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .3rem 1rem; align-items: baseline; padding-top: 1rem; border-top: 1px dashed var(--kf-line); }
.kf-tl-decade { margin: 0; font: 800 1.31rem/1 var(--kf-font-figure); color: var(--kf-gold-ink); }
.kf-tl-people li { padding-inline-start: .9rem; border-inline-start: 3px solid var(--kf-emerald); }
.kf-tl-people li.is-died { border-inline-start-color: var(--kf-gold); }
@media (max-width: 575.98px) { .kf-tl-decades > li { grid-template-columns: 1fr; } }

/* the generation ladder, with a rail to jump along it */
.kf-ladder-wrap { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.kf-ladder-rail { background: var(--kf-surface); border: 1px solid var(--kf-line); border-top: 3px solid var(--kf-gold); border-radius: 16px; padding: 1rem .9rem; max-height: calc(100vh - var(--kf-header-h) - 2rem); overflow-y: auto; }
.kf-ladder-rail ol { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: 2px; }
.kf-ladder-rail a { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 2rem; align-items: center; gap: .5rem; padding: .25rem .35rem; border-radius: 8px; text-decoration: none; color: var(--kf-text); }
.kf-ladder-rail a:hover { background: var(--kf-saffron-tint); }
.kf-rail-gen { font: 800 0.82rem/1 var(--kf-font-figure); color: var(--kf-gold-ink); text-align: end; }
.kf-rail-bar { height: 8px; border-radius: 999px; background: var(--kf-surface-2); overflow: hidden; }
.kf-rail-bar i { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: linear-gradient(90deg, var(--kf-emerald), var(--kf-gold)); }
.kf-rail-n { font: 800 0.78rem/1 var(--kf-font-figure); color: var(--kf-muted); }
.kf-ladder { background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: 18px; padding: 1.4rem 1.5rem; }
.kf-ladder-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.kf-ladder-steps::before { content: ""; position: absolute; inset-block: 1.5rem 1.5rem; inset-inline-start: 1.6rem; border-inline-start: 2px dashed color-mix(in srgb, var(--kf-gold) 55%, var(--kf-line)); }
.kf-rung { position: relative; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 1.1rem; padding: .8rem 0; scroll-margin-top: calc(var(--kf-header-h) + 1rem); }
.kf-rung-medal {
  position: relative; width: 3.2rem; height: 3.2rem; display: grid; place-items: center;
  background: linear-gradient(150deg, #2a9d66, var(--kf-shrine));
  -webkit-mask: var(--kf-orn-star) center / contain no-repeat; mask: var(--kf-orn-star) center / contain no-repeat;
}
.kf-rung-medal b { font: 800 1.02rem/1 var(--kf-font-figure); color: var(--kf-cream); }
.kf-rung.is-root .kf-rung-medal { background: linear-gradient(150deg, #ffe7a3, #e2ad48 50%, #a8741f); }
.kf-rung.is-root .kf-rung-medal b { color: var(--kf-night); }
.kf-rung:target .kf-rung-body { background: var(--kf-saffron-tint); box-shadow: 0 0 0 6px var(--kf-saffron-tint); border-radius: 10px; }
.kf-rung-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin: .5rem 0 .6rem; font: 700 0.97rem/1.2 var(--kf-font-label); color: var(--bs-emphasis-color); }
.kf-rung-head span { font: 400 .85rem/1 var(--kf-font-body); color: var(--kf-muted); }
@media (max-width: 991.98px) {
  .kf-ladder-wrap { grid-template-columns: 1fr; }
  .kf-ladder-rail { position: static; max-height: none; }
  .kf-ladder-rail ol { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 2px .8rem; }
}
@media (max-width: 575.98px) { .kf-ladder { padding: 1rem .9rem; } .kf-rung { grid-template-columns: 2.6rem minmax(0, 1fr); gap: .8rem; } .kf-rung-medal { width: 2.6rem; height: 2.6rem; } .kf-ladder-steps::before { inset-inline-start: 1.3rem; } }
@media (prefers-reduced-motion: reduce) { .kf-tl-pin { transition: none; } }
.kf-tl-axis { direction: ltr; } /* years run left to right in every language */

/* Person rows in narrow cards: the text column may shrink, and a long
   certainty label ("Reported by a family member") wraps instead of spilling. */
.min-w-0 { min-width: 0; }
.kf-person-row > div { min-width: 0; }
.kf-person-row a { overflow-wrap: anywhere; }
.kf-person-row .kf-cert { white-space: normal; align-items: baseline; }
.kf-person-row .kf-cert::before { transform: translateY(-.25em); }
.kf-cert-note { align-items: center; gap: .9rem; font-size: .85rem; color: var(--kf-muted); }
.kf-cert--short { cursor: help; }

/* ================================================================ NOTIFICATIONS
 * One colour and icon per topic, used in the stacked bar, the filter chips
 * and each item's tile; a 14-day column chart; the list grouped by day.
 */
[data-topic] { --tc: #5C6773; }
[data-topic="membership"] { --tc: var(--kf-emerald); }
[data-topic="proposal"] { --tc: var(--kf-primary); }
[data-topic="contact"] { --tc: var(--kf-teal); }
[data-topic="event"] { --tc: #5B4A9E; }
[data-topic="donation"] { --tc: var(--kf-gold-ink); }
[data-topic="help"] { --tc: #A33B5C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-topic="event"] { --tc: #A99BE8; } :root:not([data-theme="light"]) [data-topic="help"] { --tc: #E48DB0; } :root:not([data-theme="light"]) [data-topic="other"] { --tc: #A3AEBB; } }
:root[data-theme="dark"] [data-topic="event"] { --tc: #A99BE8; }
:root[data-theme="dark"] [data-topic="help"] { --tc: #E48DB0; }
:root[data-theme="dark"] [data-topic="other"] { --tc: #A3AEBB; }
.kf-nt-chip { --src: var(--tc); }

.kf-nt-glance { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.1rem; margin-bottom: 1.2rem; }
@media (max-width: 767.98px) { .kf-nt-glance { grid-template-columns: 1fr; } }
.kf-nt-panel { background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: 16px; padding: 1.1rem 1.2rem; }
.kf-nt-stack { display: flex; gap: 3px; height: 14px; margin: .5rem 0 .9rem; border-radius: 999px; overflow: hidden; background: var(--kf-surface-2); }
.kf-nt-t { min-width: 6px; background: var(--tc); }
.kf-nt-keys { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-size: .9rem; }
.kf-nt-keys li { display: inline-flex; align-items: center; gap: .45rem; }
.kf-nt-keys b { font: 800 0.9rem/1 var(--kf-font-figure); color: var(--bs-emphasis-color); }
.kf-nt-ico {
  display: inline-grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 9px; color: var(--tc);
  background: color-mix(in srgb, var(--tc) 14%, var(--kf-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 26%, transparent);
}
.kf-nt-ico .kf-icon { width: 1rem; height: 1rem; }
.kf-nt-days { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; align-items: end; }
.kf-nt-days li { position: relative; display: flex; flex-direction: column; align-items: center; }
.kf-nt-col { width: 100%; height: 64px; display: flex; align-items: flex-end; border-radius: 4px; background: var(--kf-surface-2); }
.kf-nt-col i { display: block; width: 100%; min-height: 2px; border-radius: 4px; background: linear-gradient(var(--kf-gold), var(--kf-emerald)); }
.kf-nt-days small { position: absolute; top: calc(100% + .25rem); white-space: nowrap; font: 500 .68rem/1 var(--kf-font-mono); color: var(--kf-muted); }
.kf-nt-days li:first-child small { left: 0; } .kf-nt-days li:last-child small { right: 0; }
.kf-nt-days { margin-bottom: 1.2rem; }

.kf-nt-filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.4rem; }

.kf-nt-list { display: grid; gap: 1.4rem; }
.kf-nt-dayhead { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; font: 700 0.84rem/1.2 var(--kf-font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--kf-muted); }
:lang(bn) .kf-nt-dayhead, :lang(ar) .kf-nt-dayhead { text-transform: none; letter-spacing: 0; }
.kf-nt-dayhead::after { content: ""; flex: 1; height: 1px; background: var(--kf-line); }
.kf-nt-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.kf-nt-item form { margin: 0; }
.kf-nt-item button {
  width: 100%; display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem; text-align: start; color: var(--kf-text);
  background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: 14px; transition: border-color .15s ease, box-shadow .15s ease;
}
.kf-nt-item button:hover { border-color: color-mix(in srgb, var(--tc) 45%, var(--kf-line)); box-shadow: 0 10px 24px -18px rgba(15, 34, 54, .5); }
.kf-nt-item.is-unread button { border-inline-start: 4px solid var(--tc); background: color-mix(in srgb, var(--tc) 5%, var(--kf-surface)); }
.kf-nt-item .kf-nt-ico { width: 2.5rem; height: 2.5rem; border-radius: 12px; }
.kf-nt-item .kf-nt-ico .kf-icon { width: 1.25rem; height: 1.25rem; }
.kf-nt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.kf-nt-title { font-size: 1rem; overflow-wrap: anywhere; }
.kf-nt-item.is-unread .kf-nt-title { font-weight: 700; }
.kf-nt-meta { font-size: .82rem; color: var(--kf-muted); }
.kf-nt-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 22%, transparent); flex: none; }
.kf-nt-go { color: var(--kf-muted); flex: none; }
[dir="rtl"] .kf-nt-go { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .kf-nt-item button { transition: none; } }

/* ================================================================ DONATION STATUS */
.kf-dn-hero { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.kf-dn-seal {
  width: 5rem; height: 5rem; display: grid; place-items: center; color: var(--kf-night);
  background: linear-gradient(150deg, #ffe7a3, #e2ad48 50%, #a8741f);
  -webkit-mask: var(--kf-orn-star) center / contain no-repeat; mask: var(--kf-orn-star) center / contain no-repeat;
}
.kf-dn-seal .kf-icon { width: 1.9rem; height: 1.9rem; stroke-width: 2.6; }
.kf-dn-hero[data-status="initiated"] .kf-dn-seal { background: linear-gradient(150deg, #cfe3ff, #7fa6d6 55%, #3d5f8f); }
.kf-dn-hero[data-status="failed"] .kf-dn-seal, .kf-dn-hero[data-status="cancelled"] .kf-dn-seal { background: linear-gradient(150deg, #ffd0d0, #e07a7a 55%, #a33b3b); }
.kf-dn-hero h1 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); }
.kf-dn-hero p { margin: 0; }
.kf-dn-campaign { color: #ffe2a8; font-weight: 700; text-decoration: none; }
.kf-dn-campaign:hover { color: #fff; text-decoration: underline; }
.kf-dn-amount { margin: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: end; }
.kf-dn-amount b { font: 800 2.3rem/1 var(--kf-font-figure); color: #f2c460; white-space: nowrap; }
.kf-dn-amount span { font-size: .85rem; color: rgba(255, 243, 210, .8); margin-top: .3rem; }

.kf-dn-steps { list-style: none; margin: 0 0 1.6rem; padding: 1.1rem 1.3rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
  background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: 16px; position: relative; }
.kf-dn-steps li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "dot title" "dot sub"; gap: .1rem .7rem; align-items: center; color: var(--kf-muted); }
.kf-dn-steps li + li::before { content: ""; position: absolute; inset-inline-end: calc(100% + .2rem); top: 1.1rem; width: .8rem; border-top: 2px dashed var(--kf-line-strong); }
.kf-dn-step-dot { grid-area: dot; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--kf-line-strong); background: var(--kf-surface); color: var(--kf-muted); }
.kf-dn-steps b { grid-area: title; font-size: .92rem; color: var(--kf-text); }
.kf-dn-steps small { grid-area: sub; font-size: .8rem; }
.kf-dn-steps .is-done .kf-dn-step-dot { background: var(--kf-emerald); border-color: var(--kf-emerald); color: #fff; }
.kf-dn-steps .is-current .kf-dn-step-dot { border-color: var(--kf-gold); color: var(--kf-gold-ink); box-shadow: 0 0 0 4px var(--kf-saffron-tint); }
.kf-dn-steps .is-stopped .kf-dn-step-dot { background: var(--kf-madder); border-color: var(--kf-madder); color: #fff; }
.kf-dn-next .btn { margin-top: .2rem; }
@media (max-width: 767.98px) {
  .kf-dn-hero { grid-template-columns: auto minmax(0, 1fr); }
  .kf-dn-amount { grid-column: 1 / -1; align-items: flex-start; text-align: start; }
  .kf-dn-steps { grid-template-columns: 1fr; }
  .kf-dn-steps li + li::before { display: none; }
}

/* ================================================================ TOASTS
 * Every "saved / sent / changed" message pops up at the corner instead of
 * pushing the page down. Errors stay until closed; the rest fade after a
 * few seconds (and stay put when motion is reduced, until closed).
 */
.kf-toasts { position: fixed; z-index: 1090; inset-block-end: 1.2rem; inset-inline-end: 1.2rem; display: grid; gap: .6rem; width: min(24rem, calc(100vw - 2rem)); pointer-events: none; }
.kf-toast {
  --tt: var(--kf-primary);
  pointer-events: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .75rem;
  padding: .85rem .8rem .85rem 1rem; border-radius: 14px; background: var(--kf-surface); color: var(--kf-text);
  border: 1px solid color-mix(in srgb, var(--tt) 35%, var(--kf-line)); border-inline-start: 4px solid var(--tt);
  box-shadow: 0 18px 40px -16px rgba(15, 34, 54, .45); animation: kf-toast-in .35s cubic-bezier(.2, .8, .2, 1) both; overflow: hidden; position: relative;
}
.kf-toast--success { --tt: var(--kf-emerald); }
.kf-toast--error { --tt: var(--kf-madder); }
.kf-toast--warning { --tt: var(--kf-gold-ink); }
.kf-toast--info { --tt: var(--kf-primary); }
.kf-toast-ico { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; color: #fff; background: var(--tt); }
.kf-toast-ico .kf-icon { width: 1rem; height: 1rem; }
.kf-toast-text { font-size: .95rem; line-height: 1.45; padding-top: .2rem; overflow-wrap: anywhere; }
.kf-toast-close { border: 0; background: transparent; color: var(--kf-muted); width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; }
.kf-toast-close:hover { background: var(--kf-surface-2); color: var(--kf-text); }
.kf-toast-timer { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--tt); opacity: .5; transform-origin: left; animation: kf-toast-timer var(--kf-toast-ms, 6000ms) linear both; }
[dir="rtl"] .kf-toast-timer { transform-origin: right; }
.kf-toast:hover .kf-toast-timer, .kf-toast:focus-within .kf-toast-timer { animation-play-state: paused; }
.kf-toast.is-leaving { animation: kf-toast-out .25s ease-in both; }
@keyframes kf-toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes kf-toast-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes kf-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .kf-toast, .kf-toast.is-leaving { animation: none; } .kf-toast-timer { display: none; } }
@media (max-width: 575.98px) { .kf-toasts { inset-inline: .75rem; inset-block-end: .75rem; width: auto; } }
@media print { .kf-toasts { display: none !important; } }

/* ================================================================ CAMPAIGN */
.kf-cp-hero { align-items: center; }
.kf-cp-ring {
  --p: 0; width: 9.5rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#f2c460 calc(var(--p) * 1%), rgba(255, 255, 255, .14) 0);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .06), 0 14px 30px -12px rgba(0, 0, 0, .55);
}
.kf-cp-ring-in { width: 76%; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--kf-night); text-align: center; }
.kf-cp-ring-in b { font: 800 1.8rem/1 var(--kf-font-figure); color: #f2c460; }
.kf-cp-ring-in span { font-size: .72rem; color: rgba(255, 243, 210, .8); margin-top: .2rem; }
.kf-cp-facts { margin-top: -1.2rem; }
.kf-cp-fact { font: 700 .98rem/1.3 var(--kf-font-body) !important; overflow-wrap: anywhere; }
.kf-cp-donors { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.kf-cp-donors li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .45rem .55rem; border-radius: 10px; background: var(--kf-surface-2); font-size: .95rem; }
.kf-cp-initial { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font: 400 1rem/1 var(--kf-font-display); color: var(--kf-cream); background: radial-gradient(circle at 50% 35%, #2a9d66, var(--kf-shrine) 75%); box-shadow: 0 0 0 2px var(--kf-surface), 0 0 0 3.5px var(--kf-gold); }
.kf-cp-donor { font-weight: 700; overflow-wrap: anywhere; }
.kf-cp-donors time { font-size: .82rem; }
.kf-cp-total { padding: .7rem 0; }
.kf-cp-money { font: 800 1.8rem/1 var(--kf-font-figure); color: var(--bs-emphasis-color); }
.kf-cp-money small { font: 500 .78rem/1 var(--kf-font-mono); letter-spacing: .08em; color: var(--kf-muted); margin-inline-start: .35rem; }
.kf-cp-split { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .86rem; color: var(--kf-muted); }
.kf-cp-split li { display: inline-flex; align-items: center; gap: .35rem; }
.kf-cp-split .kf-tl-dot { margin-inline-start: 0; }
.kf-cp-split b { color: var(--kf-text); font-weight: 700; }
.kf-cp-give { border-top: 3px solid var(--kf-gold); scroll-margin-top: calc(var(--kf-header-h) + 1rem); }
.kf-cp-pledge summary { display: flex; align-items: center; gap: .5rem; font-weight: 700; cursor: pointer; }
.kf-cp-pledge summary .kf-icon { color: var(--kf-emerald); }
@media (max-width: 767.98px) { .kf-cp-ring { width: 7.5rem; } .kf-cp-ring-in b { font-size: 1.7rem; } }

/* fixed-width digits wherever figures line up */
body { font-feature-settings: 'tnum' 0; }
.kf-fig dd, .kf-tl-figs dd, .kf-dir-total b, .kf-glance-figure b, .kf-src-figure, .kf-cp-money, .kf-dn-amount b, .kf-cp-ring-in b, .kf-psec-figure, .kf-nt-keys b, .kf-hero2-figures dd, .ins-hero b, .ins-tiles b { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ================================================================ SHARED DEFAULTS (Noor)
 * Panels are rounded 16px with a soft lift; the primary action is a
 * navy-to-shrine-green gradient (white text: 11:1 at the navy end, 6.3:1 at
 * the green end; in dark mode light steps with dark text).
 */
:root { --kf-btn-grad: linear-gradient(135deg, #1F3A5F 0%, #1E6B4E 100%); --kf-btn-grad-hover: linear-gradient(135deg, #152A46 0%, #145C3B 100%); --kf-lift: 0 1px 2px rgba(20, 28, 40, .05), 0 10px 28px -16px rgba(20, 28, 40, .22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kf-btn-grad: linear-gradient(135deg, #9DBBE3 0%, #5FBF95 100%); --kf-btn-grad-hover: linear-gradient(135deg, #B7CDEB 0%, #7CCBA8 100%); --kf-lift: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -16px rgba(0, 0, 0, .6); } }
:root[data-theme="dark"] { --kf-btn-grad: linear-gradient(135deg, #9DBBE3 0%, #5FBF95 100%); --kf-btn-grad-hover: linear-gradient(135deg, #B7CDEB 0%, #7CCBA8 100%); --kf-lift: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -16px rgba(0, 0, 0, .6); }
.kf-card, .kf-psec, .kf-glance-compass, .kf-glance-block, .kf-nt-panel, .kf-ladder, .kf-ladder-rail, .kf-dir-filters { border-radius: 16px; box-shadow: var(--kf-lift); border-color: color-mix(in srgb, var(--kf-line) 70%, transparent); }
.btn { border-radius: 10px; }
.btn-primary { background-image: var(--kf-btn-grad); border-color: transparent; box-shadow: 0 6px 16px -8px rgba(30, 107, 78, .55); }
.btn-primary:hover, .btn-primary:focus-visible { background-image: var(--kf-btn-grad-hover); border-color: transparent; }
.btn-outline-primary { border-radius: 10px; }

/* ================================================================ SHARED KIT (Noor): tones, stat cards, tab trays
 * Each tone is a two-stop gradient in the emblem's palette plus a few
 * supporting hues. Gold and amber are light, so they carry dark navy text;
 * the rest carry white text (all at least 4.5:1).
 */
[data-tone] { --t1: #2A9D66; --t2: #145C3B; --tink: #fff; --tsoft: #E1EFEB; --tdeep: #145C3B; }
[data-tone="emerald"] { --t1: #2A9D66; --t2: #145C3B; --tsoft: #E1EFEB; --tdeep: #145C3B; }
[data-tone="gold"] { --t1: #FFE7A3; --t2: #E2AD48; --tink: #0F2236; --tsoft: #F7EBD3; --tdeep: #8C5A1E; }
[data-tone="navy"] { --t1: #2B5A86; --t2: #0F2236; --tsoft: #E3EAF3; --tdeep: #1F3A5F; }
[data-tone="teal"] { --t1: #1F8A90; --t2: #145A5F; --tsoft: #DDF0F1; --tdeep: #145A5F; }
[data-tone="rose"] { --t1: #C0436B; --t2: #8A2846; --tsoft: #F7E1E8; --tdeep: #8A2846; }
[data-tone="violet"] { --t1: #6E5BC4; --t2: #463894; --tsoft: #E9E5F7; --tdeep: #463894; }
[data-tone="sky"] { --t1: #2A78D6; --t2: #1B4F94; --tsoft: #E1ECFA; --tdeep: #1B4F94; }
[data-tone="amber"] { --t1: #FFD08A; --t2: #E8913A; --tink: #0F2236; --tsoft: #FBE9D6; --tdeep: #9A4E12; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-tone] { --tsoft: color-mix(in srgb, var(--t1) 18%, #161F2B); --tdeep: color-mix(in srgb, var(--t1) 55%, #fff); }
}
:root[data-theme="dark"] [data-tone] { --tsoft: color-mix(in srgb, var(--t1) 18%, #161F2B); --tdeep: color-mix(in srgb, var(--t1) 55%, #fff); }

.kf-stats { display: grid; grid-template-columns: repeat(min(var(--n, 4), 4), minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
@media (max-width: 991.98px) { .kf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kf-stat-card {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label icon" "value icon" "hint hint";
  gap: .15rem .6rem; padding: 1rem 1.1rem; border-radius: 18px; color: var(--tink); text-decoration: none;
  background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--t2) 80%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}
a.kf-stat-card:hover { transform: translateY(-2px); color: var(--tink); box-shadow: 0 20px 34px -16px color-mix(in srgb, var(--t2) 85%, transparent); }
.kf-stat-orb { position: absolute; z-index: -1; border-radius: 50%; background: rgba(255, 255, 255, .16); pointer-events: none; transition: transform .25s ease; }
.kf-stat-orb--a { width: 6rem; height: 6rem; inset-inline-end: -1.6rem; top: -1.8rem; }
.kf-stat-orb--b { width: 4rem; height: 4rem; inset-inline-end: 2.4rem; bottom: -2.2rem; background: rgba(255, 255, 255, .1); }
a.kf-stat-card:hover .kf-stat-orb--a { transform: scale(1.12); }
.kf-stat-icon { grid-area: icon; align-self: start; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.kf-stat-icon .kf-icon { width: 1.25rem; height: 1.25rem; }
.kf-stat-label { grid-area: label; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
:lang(bn) .kf-stat-label, :lang(ar) .kf-stat-label { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.kf-stat-value { grid-area: value; font: 800 1.9rem/1.05 var(--kf-font-figure); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kf-stat-hint { grid-area: hint; margin-top: .3rem; font-size: .8rem; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.kf-stat-card:focus-visible { outline: 3px solid var(--kf-focus); outline-offset: 3px; }

.kf-tabbar {
  display: flex; gap: .3rem; overflow-x: auto; margin-bottom: 1.4rem; padding: .35rem; border-radius: 18px;
  background: var(--kf-surface); border: 1px solid color-mix(in srgb, var(--kf-line) 70%, transparent); box-shadow: var(--kf-lift);
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.kf-tabbar::-webkit-scrollbar { display: none; }
.kf-tab {
  flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem .3rem .3rem;
  border-radius: 13px; font-size: .88rem; font-weight: 600; color: var(--kf-muted); text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.kf-tab:hover { background: var(--tsoft); color: var(--tdeep); transform: translateY(-1px); }
.kf-tab-icon { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 9px; background: var(--tsoft); color: var(--tdeep); transition: transform .15s ease; }
.kf-tab:hover .kf-tab-icon { transform: scale(1.06); }
.kf-tab-icon .kf-icon { width: 1rem; height: 1rem; }
.kf-tab-count { padding: .05rem .45rem; border-radius: 999px; font: 700 .72rem/1.4 var(--kf-font-mono); background: var(--tsoft); color: var(--tdeep); }
.kf-tab[aria-current] { color: var(--tink); background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 8px 18px -10px var(--t2); transform: none; }
.kf-tab[aria-current] .kf-tab-icon, .kf-tab[aria-current] .kf-tab-count { background: rgba(255, 255, 255, .24); color: var(--tink); }
@media (prefers-reduced-motion: reduce) { .kf-stat-card, .kf-tab, .kf-tab-icon, .kf-stat-orb { transition: none; } a.kf-stat-card:hover, .kf-tab:hover { transform: none; } }
@media print { .kf-tabbar { display: none !important; } .kf-stat-card { background: none; color: #000; border: 1px solid #999; box-shadow: none; } }

/* the tree page's Views menu: coloured icon tiles with a line of description */
.kf-views { min-width: 20rem; padding: .7rem; border-radius: 16px; border: 1px solid var(--kf-line); box-shadow: 0 18px 50px rgba(20, 28, 40, .18); background: var(--kf-surface); }
.kf-views .kf-mega-link:hover, .kf-views .kf-mega-link:focus-visible { background: var(--tsoft); }
.kf-views-icon { flex: none; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 11px; color: var(--tink); background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 6px 14px -8px var(--t2); }
.kf-views-icon .kf-icon { width: 1.05rem; height: 1.05rem; }
.kf-views-branches { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 .4rem .3rem; }
.kf-views-branch { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; font-size: .86rem; font-weight: 600; color: var(--kf-text); text-decoration: none; background: var(--kf-surface-2); border: 1px solid var(--kf-line); }
.kf-views-branch:hover { border-color: var(--kf-gold-soft); background: var(--kf-saffron-tint); color: var(--kf-text); }
.kf-views-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--kf-gold); }

/* A node with a flag ("Historical root", "Disputed link" …) gives the flag its
   own room above the name instead of letting it sit on top of it. */
.t-node:has(> .t-flag) { padding-top: 1.25rem; }
.t-flag { top: -.7rem; max-width: calc(100% - 2.6rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; }
.t-node--root .t-flag { background: linear-gradient(135deg, #FFE7A3, #E2AD48); border-color: #E2AD48; color: #0F2236; }

/* ================================================================ FAMILY AT A GLANCE, made vivid
 * Layout and decoration only: the data colours (branch slots, certainty
 * ramp, life states) stay exactly as validated above.
 */
.shajra-insights { background: linear-gradient(180deg, color-mix(in srgb, var(--kf-saffron-tint) 45%, var(--kf-surface)), var(--kf-surface) 30%); }
.ins-head {
  position: relative; isolation: isolate; overflow: hidden; margin: -.2rem -.25rem 0; padding: 1rem 1rem 1rem; border: 0; border-radius: 16px; color: var(--kf-cream);
  background: radial-gradient(circle at 90% 10%, rgba(255, 243, 210, .14), transparent 30%), linear-gradient(135deg, var(--kf-night), var(--kf-night-2) 60%, var(--kf-shrine));
  box-shadow: 0 14px 30px -18px rgba(15, 34, 54, .8);
}
.ins-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #f2c460; opacity: .1; -webkit-mask: var(--kf-orn-jali) 0 0 / 34px 34px; mask: var(--kf-orn-jali) 0 0 / 34px 34px; }
.ins-head .kf-eyebrow { color: #f2c460; }
.ins-head .kf-eyebrow::before { background: #f2c460; }
.ins-hero b { color: #f2c460; font-size: 3rem; text-shadow: 0 2px 18px rgba(242, 196, 96, .35); }
.ins-hero span { color: rgba(255, 243, 210, .85); }
.ins-head .ins-note { color: rgba(255, 243, 210, .75); }
.ins-tiles { gap: .45rem; }
.ins-tiles li { position: relative; overflow: hidden; border: 0; border-radius: 12px; padding: .55rem .6rem .5rem; color: var(--tink); background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 8px 16px -10px var(--t2); }
.ins-tiles li b { color: var(--tink); font-size: 1.3rem; }
.ins-tiles li span { color: var(--tink); opacity: .85; font-size: .72rem; }
.ins-tile-icon { position: absolute; top: .4rem; inset-inline-end: .4rem; width: 1.35rem; height: 1.35rem; display: grid; place-items: center; border-radius: 7px; background: rgba(255, 255, 255, .22); }
.ins-tile-icon .kf-icon { width: .8rem; height: .8rem; }
.ins-tiles li .ins-tile-icon { color: var(--tink); }
.ins-ring { position: absolute; top: .4rem; inset-inline-end: .4rem; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: radial-gradient(closest-side, var(--t2) 62%, transparent 64%), conic-gradient(#0F2236 calc(var(--p) * 1%), rgba(15, 34, 54, .18) 0); }

.ins-block { margin-top: .9rem; padding: .95rem .9rem .5rem; border: 1px solid color-mix(in srgb, var(--kf-line) 70%, transparent); border-radius: 14px; background: var(--kf-surface); box-shadow: var(--kf-lift); }
.ins-block:last-of-type { border-bottom: 1px solid color-mix(in srgb, var(--kf-line) 70%, transparent); }
.ins-block h3 { display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.ins-h-icon { flex: none; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 9px; color: var(--tink); background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 5px 12px -7px var(--t2); }
.ins-h-icon .kf-icon { width: .95rem; height: .95rem; }
.ins-sub { margin-inline-start: 2.25rem; }
.ins-top { counter-reset: rank; list-style: none; padding: 0; }
.ins-top li { counter-increment: rank; position: relative; padding-inline-start: 2.1rem; }
.ins-top li::before {
  content: counter(rank); position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center; font: 800 .78rem/1 var(--kf-font-figure); color: #0F2236; background: linear-gradient(135deg, #e9edf2, #b9c4d2);
}
.ins-top li:nth-child(1)::before { background: linear-gradient(135deg, #FFE7A3, #E2AD48); }
.ins-top li:nth-child(2)::before { background: linear-gradient(135deg, #f1f4f7, #a9b6c4); }
.ins-top li:nth-child(3)::before { background: linear-gradient(135deg, #f3d2b0, #c98a5a); }
.ins-table { box-shadow: none; }

.kf-match-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); }
.kf-match { position: relative; display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: 14px; transition: border-color .15s ease, transform .15s ease; }
.kf-match:hover { border-color: var(--kf-gold-soft); transform: translateY(-1px); }
.kf-match-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kf-match-name { font-weight: 700; color: var(--bs-emphasis-color); text-decoration: none; overflow-wrap: anywhere; }
.kf-match-name::after { content: ""; position: absolute; inset: 0; }
.kf-match-meta { font-size: .82rem; color: var(--kf-muted); }
.kf-match-go { color: var(--kf-muted); flex: none; }
[dir="rtl"] .kf-match-go { transform: scaleX(-1); }
.kf-match:has(a:focus-visible) { outline: 3px solid var(--kf-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .kf-match { transition: none; } .kf-match:hover { transform: none; } }
/* the whole bar shows focus, so the field inside it does not draw a second ring */
.kf-dir-search input:focus-visible { outline: none !important; }

/* campaign cards: a coloured cover by category, then purpose, money and a progress bar */
.kf-cp-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }
.kf-cp-card { position: relative; display: flex; flex-direction: column; background: var(--kf-surface); border: 1px solid color-mix(in srgb, var(--kf-line) 70%, transparent); border-radius: 18px; overflow: hidden; box-shadow: var(--kf-lift); transition: transform .18s ease, box-shadow .18s ease; }
.kf-cp-card:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -22px rgba(15, 34, 54, .45); }
.kf-cp-card:has(a:focus-visible) { outline: 3px solid var(--kf-focus); outline-offset: 2px; }
.kf-cp-cover { position: relative; isolation: isolate; overflow: hidden; height: 88px; display: flex; align-items: flex-end; justify-content: space-between; padding: .8rem 1rem; color: var(--tink); background: linear-gradient(135deg, var(--t1), var(--t2)); }
.kf-cp-cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; opacity: .12; -webkit-mask: var(--kf-orn-jali) 0 0 / 30px 30px; mask: var(--kf-orn-jali) 0 0 / 30px 30px; }
.kf-cp-cover-icon { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 13px; background: rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.kf-cp-cover-icon .kf-icon { width: 1.3rem; height: 1.3rem; }
.kf-cp-cover-tag { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .22); }
:lang(bn) .kf-cp-cover-tag, :lang(ar) .kf-cp-cover-tag { text-transform: none; letter-spacing: 0; }
.kf-cp-card-body { flex: 1; display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem 1rem; }
.kf-cp-card-title { margin: 0; font-family: var(--kf-font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.25; }
.kf-cp-card-title a { color: var(--bs-emphasis-color); text-decoration: none; }
.kf-cp-card-title a::after { content: ""; position: absolute; inset: 0; }
.kf-cp-card-title a:focus-visible { outline: none !important; }
.kf-cp-card-purpose { margin: 0; color: var(--kf-muted); font-size: .92rem; }
.kf-cp-card-money { display: flex; align-items: baseline; gap: .4rem; margin-top: .2rem; }
.kf-cp-card-money b { font: 800 1.25rem/1.1 var(--kf-font-figure); color: var(--bs-emphasis-color); font-variant-numeric: tabular-nums; }
.kf-cp-card-money span, .kf-cp-card-target { font-size: .85rem; color: var(--kf-muted); margin: 0; }
.kf-cp-card-foot { margin-top: auto; padding-top: .7rem; border-top: 1px dashed var(--kf-line); display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .82rem; color: var(--kf-muted); }
.kf-cp-card-vis { display: inline-flex; align-items: center; gap: .3rem; }
.kf-cp-card .kf-dir-open { padding-top: 0; margin-top: 0; }
.kf-cp-card:hover .kf-dir-open .kf-icon { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .kf-cp-card { transition: none; } .kf-cp-card:hover { transform: none; } }

/* help board: category-coloured request cards and a numbered process */
.kf-hb-chip { --src: var(--tdeep); }
.kf-hb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.kf-hb-card { position: relative; display: flex; gap: 1rem; padding: 1rem 1.1rem; background: var(--kf-surface); border: 1px solid color-mix(in srgb, var(--kf-line) 70%, transparent); border-inline-start: 4px solid var(--t2); border-radius: 16px; box-shadow: var(--kf-lift); transition: transform .18s ease; }
.kf-hb-card:hover { transform: translateY(-2px); }
.kf-hb-card:has(a:focus-visible) { outline: 3px solid var(--kf-focus); outline-offset: 2px; }
.kf-hb-icon { flex: none; width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border-radius: 14px; color: var(--tink); background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 8px 16px -10px var(--t2); }
.kf-hb-icon .kf-icon { width: 1.35rem; height: 1.35rem; }
.kf-hb-body { flex: 1; min-width: 0; }
.kf-hb-top { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.kf-hb-cat { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tdeep); margin-inline-end: auto; }
:lang(bn) .kf-hb-cat, :lang(ar) .kf-hb-cat { text-transform: none; letter-spacing: 0; }
.kf-hb-title { margin: .35rem 0 .25rem; font-family: var(--kf-font-display); font-weight: 600; font-size: 1.2rem; }
.kf-hb-title a { color: var(--bs-emphasis-color); text-decoration: none; }
.kf-hb-title a::after { content: ""; position: absolute; inset: 0; }
.kf-hb-title a:focus-visible { outline: none !important; }
.kf-hb-text { margin: 0; color: var(--kf-muted); font-size: .93rem; }
.kf-hb-steps { counter-reset: s; list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; font-size: .92rem; }
.kf-hb-steps li { counter-increment: s; position: relative; padding-inline-start: 2.4rem; min-height: 1.8rem; }
.kf-hb-steps li::before { content: counter(s); position: absolute; inset-inline-start: 0; top: -.1rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font: 800 .85rem/1 var(--kf-font-figure); color: #fff; background: var(--kf-btn-grad); }
.kf-hb-steps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: .88rem; top: 1.8rem; bottom: -.7rem; border-inline-start: 2px dashed var(--kf-line-strong); }
@media (prefers-reduced-motion: reduce) { .kf-hb-card { transition: none; } .kf-hb-card:hover { transform: none; } }

/* ================================================================ COMMUNITY: announcements and events */
.kf-an-list, .kf-ev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.kf-an-card, .kf-ev-card { position: relative; display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.1rem; background: var(--kf-surface); border: 1px solid color-mix(in srgb, var(--kf-line) 70%, transparent); border-radius: 16px; box-shadow: var(--kf-lift); transition: transform .18s ease; }
.kf-an-card:hover, .kf-ev-card:hover { transform: translateY(-2px); }
.kf-an-card:has(a:focus-visible), .kf-ev-card:has(a:focus-visible) { outline: 3px solid var(--kf-focus); outline-offset: 2px; }
.kf-an-card.is-pinned { border-color: var(--kf-gold-soft); background: linear-gradient(100deg, var(--kf-saffron-tint), var(--kf-surface) 55%); }
.kf-an-date, .kf-ev-date { flex: none; width: 3.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .45rem 0; border-radius: 14px; text-align: center; line-height: 1.05; }
.kf-an-date { color: #fff; background: linear-gradient(135deg, #2A9D66, #145C3B); box-shadow: 0 8px 16px -10px #145C3B; }
.kf-an-card.is-pinned .kf-an-date { color: #0F2236; background: linear-gradient(135deg, #FFE7A3, #E2AD48); box-shadow: 0 8px 16px -10px #A8741F; }
.kf-an-date b, .kf-ev-date b { font: 800 1.45rem/1 var(--kf-font-figure); }
.kf-an-date span { font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .9; margin-top: .15rem; }
.kf-an-body, .kf-ev-body { flex: 1; min-width: 0; }
.kf-an-top { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; font-size: .8rem; color: var(--kf-muted); }
.kf-an-pin { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; color: var(--kf-gold-ink); }
.kf-an-pin .kf-icon { width: .8rem; height: .8rem; }
.kf-an-branch { padding: .05rem .5rem; border-radius: 999px; background: var(--kf-surface-2); border: 1px solid var(--kf-line); font-weight: 600; color: var(--kf-text); }
.kf-an-title, .kf-ev-title { margin: .3rem 0 .25rem; font-family: var(--kf-font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; }
.kf-an-title a, .kf-ev-title a { color: var(--bs-emphasis-color); text-decoration: none; }
.kf-an-title a::after, .kf-ev-title a::after { content: ""; position: absolute; inset: 0; }
.kf-an-title a:focus-visible, .kf-ev-title a:focus-visible { outline: none !important; }
.kf-an-text, .kf-ev-text { margin: 0; color: var(--kf-muted); font-size: .93rem; }
.kf-ev-date { overflow: hidden; padding: 0; background: var(--kf-surface); border: 1px solid var(--kf-line); box-shadow: var(--kf-lift); }
.kf-ev-date span { align-self: stretch; padding: .2rem 0; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #6E5BC4, #463894); }
.kf-ev-date b { padding-top: .35rem; color: var(--bs-emphasis-color); }
.kf-ev-date small { padding-bottom: .35rem; font-size: .7rem; color: var(--kf-muted); }
.kf-ev-facts { list-style: none; margin: 0 0 .35rem; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .85rem; color: var(--kf-muted); }
.kf-ev-facts li { display: inline-flex; align-items: center; gap: .3rem; }
.kf-ev-facts .kf-icon { color: #6E5BC4; width: .95rem; height: .95rem; }
.kf-ev-card .kf-match-go { align-self: center; }
.kf-ev-mini { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .6rem; }
.kf-ev-mini li { display: flex; gap: .7rem; align-items: center; }
.kf-ev-mini-date { flex: none; width: 2.7rem; padding: .25rem 0; border-radius: 10px; display: flex; flex-direction: column; align-items: center; font-size: .66rem; font-weight: 700; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #6E5BC4, #463894); line-height: 1.1; }
.kf-ev-mini-date b { font: 800 1.1rem/1 var(--kf-font-figure); }
.kf-ev-mini-body { min-width: 0; display: flex; flex-direction: column; }
.kf-ev-mini-body a { font-weight: 700; text-decoration: none; color: var(--bs-emphasis-color); }
.kf-ev-mini-body a:hover { text-decoration: underline; }
.kf-ev-mini-body small { color: var(--kf-muted); font-size: .8rem; }
@media (prefers-reduced-motion: reduce) { .kf-an-card, .kf-ev-card { transition: none; } .kf-an-card:hover, .kf-ev-card:hover { transform: none; } }

.kf-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .9rem; color: var(--kf-muted); }
.kf-tips li { display: flex; gap: .55rem; align-items: baseline; }
.kf-tips li::before { content: ""; flex: none; width: .7rem; height: .7rem; transform: translateY(.08rem); background: var(--kf-gold); -webkit-mask: var(--kf-orn-star) center / contain no-repeat; mask: var(--kf-orn-star) center / contain no-repeat; }
/* inbox rows */
.kf-msg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.kf-msg { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: 12px; background: var(--kf-surface-2); }
.kf-msg.is-unread { background: color-mix(in srgb, var(--kf-emerald) 8%, var(--kf-surface)); box-shadow: inset 3px 0 0 var(--kf-emerald); }
.kf-msg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kf-msg-body a { font-weight: 600; text-decoration: none; color: var(--bs-emphasis-color); overflow-wrap: anywhere; }
.kf-msg.is-unread .kf-msg-body a { font-weight: 800; }
.kf-msg-body a:hover { text-decoration: underline; }
.kf-msg-body small { font-size: .78rem; color: var(--kf-muted); }

/* ================================================================ FORM SIZES (Noor standard)
 * Fields at 15px with compact padding and smaller semibold labels, so forms
 * read at the same scale as the rest of the interface.
 */
.form-control, .form-select { font-size: .95rem; padding: .5rem .75rem; border-radius: 10px; min-height: 0; }
.form-select { padding-inline-end: 2.25rem; }
textarea.form-control { line-height: 1.55; }
.form-label { font-size: .88rem; font-weight: 600; margin-bottom: .3rem; }
.form-text { font-size: .8rem; }
.kf-field { margin-bottom: 1rem; }
.form-check-label { font-size: .92rem; }
.kf-form-actions .btn { font-size: .92rem; }

/* A larger family emblem in the header and footer. The header grows with it,
   and everything that offsets from it reads --kf-header-h. */
:root { --kf-header-h: 80px; }

.kf-brand { gap: .8rem; }
.kf-brand-name { font-size: 1.4rem; }

@media (max-width: 575.98px) {
  :root { --kf-header-h: 68px; }
  
  .kf-brand-name { font-size: 1.05rem; }
}
.kf-brand-name { text-wrap: balance; }
@media (min-width: 1200px) {
  .kf-brand-name { white-space: nowrap; font-size: 1.3rem; }
  .kf-header-search { max-width: 230px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) { .kf-brand-name { font-size: 1.15rem; } .kf-brand-name small { display: none; } }

/* events: a month calendar and a six-month column chart beside the list */
.kf-cal { width: 100%; border-collapse: separate; border-spacing: 3px; text-align: center; font-size: .86rem; }
.kf-cal th { font-size: .7rem; font-weight: 700; color: var(--kf-muted); text-transform: uppercase; letter-spacing: .04em; padding-bottom: .2rem; }
.kf-cal td { position: relative; height: 2.1rem; border-radius: 9px; font-variant-numeric: tabular-nums; color: var(--kf-text); background: var(--kf-surface-2); }
.kf-cal td.is-out { color: color-mix(in srgb, var(--kf-muted) 55%, transparent); background: transparent; }
.kf-cal td.is-today { box-shadow: inset 0 0 0 2px var(--kf-gold); font-weight: 800; }
.kf-cal td.has-event { color: #fff; font-weight: 800; background: linear-gradient(135deg, #6E5BC4, #463894); box-shadow: 0 6px 12px -8px #463894; }
.kf-cal td.has-event.is-today { box-shadow: inset 0 0 0 2px var(--kf-gold), 0 6px 12px -8px #463894; }
.kf-cal-key { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 0; font-size: .8rem; color: var(--kf-muted); }
.kf-cal-dot, .kf-cal-today { width: .8rem; height: .8rem; border-radius: 4px; display: inline-block; }
.kf-cal-dot { background: linear-gradient(135deg, #6E5BC4, #463894); }
.kf-cal-today { box-shadow: inset 0 0 0 2px var(--kf-gold); margin-inline-start: .7rem; }
.kf-ev-months { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; align-items: end; }
.kf-ev-months li { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.kf-ev-months-col { width: 100%; height: 72px; display: flex; align-items: flex-end; border-radius: 8px; background: var(--kf-surface-2); }
.kf-ev-months-col i { display: block; width: 100%; min-height: 3px; border-radius: 8px; background: linear-gradient(#E2AD48, #6E5BC4); }
.kf-ev-months b { font: 800 .95rem/1 var(--kf-font-figure); color: var(--bs-emphasis-color); }
.kf-ev-months small { font-size: .72rem; color: var(--kf-muted); text-transform: uppercase; }

/* the home title, at a size that sits with the rest of the hero */

/* directory: the newest members, as a row of onion-arch portraits */
.kf-newest { margin-bottom: 1.8rem; padding: 1.1rem 1.2rem; background: var(--kf-surface); border: 1px solid color-mix(in srgb, var(--kf-line) 70%, transparent); border-top: 3px solid var(--kf-gold); border-radius: 16px; box-shadow: var(--kf-lift); }
.kf-newest-row { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.kf-newest-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: .7rem .5rem .6rem; border-radius: 14px; transition: background .15s ease; }
.kf-newest-card:hover { background: var(--kf-saffron-tint); }
.kf-newest-portrait { margin-top: 0; width: 64px; }
.kf-newest-name { font-weight: 700; font-size: .92rem; line-height: 1.25; color: var(--bs-emphasis-color); text-decoration: none; overflow-wrap: anywhere; }
.kf-newest-name::after { content: ""; position: absolute; inset: 0; }
.kf-newest-card:has(a:focus-visible) { outline: 3px solid var(--kf-focus); outline-offset: 2px; }
.kf-newest-name:focus-visible { outline: none !important; }
.kf-newest-card small { font-size: .76rem; color: var(--kf-muted); }

/* the home introduction, at body size so the title leads */
.kf-hero2-lede { font-size: clamp(.95rem, .9rem + .2vw, 1.05rem); line-height: 1.65; max-width: 34rem; margin-bottom: 1.5rem; }

/* ================================================================ HOME HERO: the Ajmer poster
 * The poster carries its own lettering, so it is shown whole as a banner and
 * the site's title and actions sit in a night band beneath it.
 */
.kf-hero3 { background: #0c1a2b; color: #fff; }
.kf-hero3-poster { position: relative; margin: 0; overflow: hidden; max-height: 78vh; }
.kf-hero3-poster img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: cover; object-position: center 35%; }
.kf-hero3-poster::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 22%; background: linear-gradient(transparent, #0c1a2b); pointer-events: none; }
.kf-hero3-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(circle at 85% 0%, rgba(242, 196, 96, .14), transparent 40%), linear-gradient(180deg, #0c1a2b, #12304a 60%, #134a3c);
}
.kf-hero3-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #f2c460; opacity: .07; -webkit-mask: var(--kf-orn-jali) 0 0 / 44px 44px; mask: var(--kf-orn-jali) 0 0 / 44px 44px; }
.kf-hero3-band::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 12px; opacity: .9; background: linear-gradient(90deg, #a8741f, #f2c460 50%, #a8741f);
  -webkit-mask: var(--kf-orn-kangura) 0 100% / 24px 12px repeat-x; mask: var(--kf-orn-kangura) 0 100% / 24px 12px repeat-x; }
.kf-hero3-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: end; padding-block: 1.6rem 3rem; }
.kf-hero3 h1 { color: #fff; font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); line-height: 1.1; margin: .8rem 0 .8rem; text-wrap: balance; }
.kf-hero3 .btn:focus-visible { outline: 3px solid #ffe2a8; outline-offset: 3px; }
.kf-hero3-figures { margin: 0; padding: 0; border-top: 0; justify-content: flex-end; }
.kf-hero3-figures div { padding: .8rem 1rem; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(242, 196, 96, .25); }
@media (max-width: 991.98px) {
  .kf-hero3-inner { grid-template-columns: 1fr; padding-block: 1rem 2.4rem; }
  .kf-hero3-figures { justify-content: flex-start; }
}
@media (max-width: 575.98px) { .kf-hero3-poster img { min-height: 210px; object-position: 30% center; } .kf-hero3-figures div { padding: .6rem .7rem; } }
.kf-hero3-poster::after { height: 7%; }
.kf-hero3-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; align-self: end; }
.kf-hero3-figures dd { font-size: 2rem; }
.kf-hero3-figures dt { font-size: .78rem; }

/* Top bar: a light shrine-green tint in light mode; dark mode keeps the night bar. */
:root { --kf-header-bg: color-mix(in srgb, #E3F1EA 92%, transparent); --kf-header-line: #C9E2D5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kf-header-bg: color-mix(in srgb, var(--kf-bg) 88%, transparent); --kf-header-line: var(--kf-line); } }
:root[data-theme="dark"] { --kf-header-bg: color-mix(in srgb, var(--kf-bg) 88%, transparent); --kf-header-line: var(--kf-line); }
.kf-header { background: var(--kf-header-bg); border-bottom-color: var(--kf-header-line); }
.kf-header .kf-header-search .form-control { background: #fff; border-color: #C9E2D5; }
:root[data-theme="dark"] .kf-header .kf-header-search .form-control { background: var(--kf-surface); border-color: var(--kf-line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kf-header .kf-header-search .form-control { background: var(--kf-surface); border-color: var(--kf-line); } }
.kf-nav .nav-link:hover { background: color-mix(in srgb, var(--kf-emerald) 12%, transparent); }

/* home: notices, coming up and branches, each with its icon */
.kf-home-notice-date { background: linear-gradient(135deg, #2A9D66, #145C3B); }
.kf-home-branches { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.kf-home-branches li { display: flex; align-items: center; gap: .65rem; }
.kf-home-branch-icon { flex: none; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 10px; color: #0F2236; background: linear-gradient(135deg, #FFE7A3, #E2AD48); }
.kf-home-branch-icon .kf-icon { width: 1rem; height: 1rem; }
.kf-home-branches li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.kf-home-branches b { font-size: .95rem; overflow-wrap: anywhere; }
.kf-home-branches small { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; color: var(--kf-muted); }
.kf-home-branches small .kf-icon { width: .8rem; height: .8rem; }

/* The horizontal logo (emblem and the KHAWAJA wordmark) leads the brand; the
   rest of the site name sits beside it. */
.kf-brand-logo { height: 58px; width: auto; flex: none; display: block; }
.kf-brand-rest { padding-inline-start: .75rem; border-inline-start: 2px solid var(--kf-gold-soft); line-height: 1.1; }
.kf-brand-logo--footer { height: 35px; } /* 60% of the 58px header logo */
.kf-footer .kf-brand-rest { font-size: .95rem; padding-inline-start: .55rem; }
@media (max-width: 575.98px) {
  .kf-header .kf-brand-logo { height: 42px; }
  .kf-header .kf-brand-rest { font-size: .98rem; padding-inline-start: .55rem; }
}
/* dark mode: the logo stays transparent on the night background; a slight lift
   and a faint light edge keep the green wordmark readable without a plate. */
:root[data-theme="dark"] .kf-brand-logo { filter: brightness(1.25) saturate(1.1) drop-shadow(0 0 .6px rgba(255, 248, 225, .7)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kf-brand-logo { filter: brightness(1.25) saturate(1.1) drop-shadow(0 0 .6px rgba(255, 248, 225, .7)); } }

/* ================================================================ COMPACT MENUS
 * Header navigation, the Family tree menu and every dropdown read one step
 * smaller, signed in or not.
 */
.kf-nav .nav-link { font-size: .875rem; padding: .45rem .7rem !important; }
.dropdown-menu { font-size: .875rem; }
.dropdown-item { padding-block: .4rem; }
@media (min-width: 992px) { .kf-mega { width: 520px; } }
.kf-mega { padding: .85rem; }
.kf-mega-h { font-size: .64rem; }
.kf-mega-link { gap: .6rem; padding: .42rem .5rem; }
.kf-mega-link b { font-size: .86rem; }
.kf-mega-link small { font-size: .72rem; }
.kf-mega-icon { width: 32px; height: 32px; border-radius: 9px; }
.kf-mega-icon .kf-icon { width: 16px; height: 16px; }
.kf-mega-branches { font-size: .84rem; }
.kf-mega-note { font-size: .78rem; }
.kf-mega-find label { font-size: .8rem; }
.kf-views { min-width: 18rem; }
.kf-views-icon { width: 2rem; height: 2rem; border-radius: 10px; }
.kf-views-branch { font-size: .8rem; }
.kf-head-btn { font-size: .82rem; font-weight: 700; padding: .34rem .8rem; border-radius: 999px; }

/* ================================================================ ACCOUNT MENU
 * The viewer's own portrait in a gold ring; the menu opens on a night-blue
 * card with the jali pattern, then tinted icon rows like the tree views menu.
 */
.kf-me-btn {
  display: inline-flex; align-items: center; gap: .45rem; padding: 3px .6rem 3px 3px;
  border-radius: 999px; border: 1px solid var(--kf-line); background: var(--kf-surface);
  color: var(--kf-text); font-size: .82rem; font-weight: 700; line-height: 1;
  transition: border-color .15s, background-color .15s;
}
.kf-me-btn:hover, .kf-me-btn[aria-expanded="true"] { border-color: var(--kf-gold-soft); background: var(--kf-saffron-tint); }
.kf-me-btn:focus-visible { outline: 2px solid var(--kf-gold); outline-offset: 2px; }
.kf-me-btn-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-me-caret { width: .8rem; height: .8rem; color: var(--kf-muted); transform: rotate(90deg); transition: transform .15s; }
.kf-me-btn[aria-expanded="true"] .kf-me-caret { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .kf-me-caret, .kf-me-btn { transition: none; } }

.kf-me-ring { display: inline-flex; padding: 2px; border-radius: 50%; flex: none; background: conic-gradient(from 210deg, var(--kf-gold), #F3D27A, var(--kf-emerald), var(--kf-gold)); }
.kf-me-ring .kf-avatar { border: 2px solid var(--kf-surface); font-family: var(--kf-font-body); font-weight: 700; }
.kf-avatar--me { --size: 30px; font-size: .74rem; }
.kf-avatar--me-lg { --size: 52px; font-size: 1.15rem; }
.kf-me-ring--lg .kf-avatar { border-color: var(--kf-night); }

.kf-me { width: 300px; padding: 0 0 .4rem; overflow: hidden; border-radius: 16px; border: 1px solid var(--kf-line); box-shadow: 0 18px 50px rgba(20, 28, 40, .2); }
.kf-me .dropdown-item { display: flex; align-items: center; gap: .6rem; border-radius: 10px; font-weight: 600; white-space: normal; }
.kf-me .dropdown-item:hover, .kf-me .dropdown-item:focus-visible { background: var(--tsoft, var(--kf-lapis-tint)); color: var(--kf-text); }
.kf-me .dropdown-item:active { color: var(--kf-text); }

.kf-me-head { position: relative; isolation: isolate; display: flex; align-items: center; gap: .75rem; padding: 1rem 1rem .9rem; color: var(--kf-cream); background: linear-gradient(135deg, var(--kf-night) 0%, var(--kf-night-2) 70%, var(--kf-shrine) 130%); }
.kf-me-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--kf-gold); opacity: .3; pointer-events: none;
  -webkit-mask: var(--kf-orn-jali) 0 0 / 40px 40px, linear-gradient(to left, #000 5%, transparent 85%);
  -webkit-mask-composite: source-in;
  mask: var(--kf-orn-jali) 0 0 / 40px 40px, linear-gradient(to left, #000 5%, transparent 85%);
  mask-composite: intersect;
}
.kf-me-who { min-width: 0; display: grid; gap: .15rem; }
.kf-me-who b { font-family: var(--kf-font-display); font-size: 1.02rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.kf-me-who small { font-size: .74rem; color: color-mix(in srgb, var(--kf-cream) 72%, transparent); }
.kf-me-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.kf-me-tag { display: inline-flex; align-items: center; gap: .25rem; padding: .12rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 700; color: var(--kf-cream); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); }
.kf-me-tag .kf-icon { width: .68rem; height: .68rem; }
.kf-me-tag--ok { color: #0F2236; background: linear-gradient(135deg, #FFE7A3, #E2AD48); border-color: transparent; }
.kf-me-tag--code { font-family: var(--kf-font-mono); letter-spacing: .04em; }

.kf-me-profile { justify-content: space-between; width: auto; margin: .5rem .5rem 0; padding: .45rem .7rem; color: var(--kf-gold-ink) !important; background: var(--kf-saffron-tint); border: 1px solid var(--kf-gold-soft); }
.kf-me-profile:hover, .kf-me-profile:focus-visible { background: color-mix(in srgb, var(--kf-saffron-tint) 70%, var(--kf-gold) 30%) !important; }
.kf-me-profile .kf-icon { width: .72rem; height: .72rem; }
.kf-me-out .kf-icon { width: .98em; height: .98em; }
:root[data-theme="dark"] .kf-me-profile { color: var(--kf-gold) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kf-me-profile { color: var(--kf-gold) !important; } }

.kf-me-quick { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding: .5rem .5rem .2rem; }
.kf-me .kf-me-tile { gap: .5rem; padding: .45rem .55rem; border: 1px solid var(--kf-line); background: var(--kf-surface-2); }
.kf-me-tile > span:last-child { display: grid; line-height: 1.15; min-width: 0; }
.kf-me-tile b { font-size: .86rem; }
.kf-me-tile small { font-size: .7rem; font-weight: 600; color: var(--kf-muted); }

.kf-me-list { list-style: none; margin: 0; padding: .2rem .5rem; }
.kf-me-ico { flex: none; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 7px; color: var(--tink, #fff); background: linear-gradient(135deg, var(--t1, var(--kf-primary)), var(--t2, var(--kf-primary))); box-shadow: 0 5px 12px -7px var(--t2, transparent); }
.kf-me-ico .kf-icon { width: .77rem; height: .77rem; }
.kf-me-label { margin: .45rem 1.1rem .1rem; padding-top: .55rem; border-top: 1px solid var(--kf-line); font: 700 .62rem/1 var(--kf-font-label, var(--kf-font-body)); letter-spacing: .1em; text-transform: uppercase; color: var(--kf-muted); }
:lang(bn) .kf-me-label, :lang(ar) .kf-me-label { text-transform: none; letter-spacing: 0; font-size: .74rem; }

.kf-me-foot { margin: .3rem .5rem 0; padding-top: .35rem; border-top: 1px solid var(--kf-line); }
.kf-me .kf-me-out { width: 100%; color: var(--kf-madder); }
.kf-me .kf-me-out:hover, .kf-me .kf-me-out:focus-visible { color: var(--kf-madder); background: color-mix(in srgb, var(--kf-madder) 10%, transparent); }

/* In the collapsed mobile menu the account card sits in the flow, full width. */
@media (max-width: 991.98px) {
  .kf-me-wrap { margin-inline-start: auto; }
  .kf-me { width: min(300px, calc(100vw - 32px)); }
}

/* ================================================================ LOST PAGE: WELCOME
 * Unknown addresses suggest the nearest working one and offer the main
 * sections as tinted tiles.
 */
.kf-lost-suggest { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; margin: -.3rem auto 1.4rem; padding: .5rem 1rem; border-radius: 999px; font-size: .9rem; background: var(--kf-saffron-tint); border: 1px solid var(--kf-gold-soft); }
.kf-lost-suggest .kf-icon { color: var(--kf-gold); }
.kf-lost-suggest a { font-weight: 700; overflow-wrap: anywhere; }
.kf-lost-welcome { padding-top: 1.3rem; border-top: 1px dashed var(--kf-line); text-align: start; }
.kf-lost-welcome h2 { font-size: 1rem; text-align: center; margin: 0 0 .9rem; text-wrap: balance; }
.kf-lost-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem; }
.kf-lost-tiles .kf-mega-link { height: 100%; border: 1px solid var(--kf-line); background: var(--kf-surface); }
.kf-lost-tiles .kf-mega-link:hover, .kf-lost-tiles .kf-mega-link:focus-visible { background: var(--tsoft); border-color: color-mix(in srgb, var(--t1) 40%, transparent); }

/* ================================================================ MESSAGING & PAYMENTS
 * One card per channel: its switches, the read-only gateway status, a test button.
 */
.kf-gw + .kf-gw { margin-top: 1rem; }
.kf-gw .kf-psec-head { gap: .6rem; }
.kf-gw .kf-me-ico { width: 2rem; height: 2rem; border-radius: 10px; }
.kf-gw .kf-me-ico .kf-icon { width: 1rem; height: 1rem; }
.kf-gw-fields { display: grid; gap: .2rem; }
.kf-gw-status { display: grid; gap: .45rem; margin: .4rem 0 .9rem; padding: .8rem .9rem; border-radius: 12px; background: var(--kf-surface-2); border: 1px solid var(--kf-line); font-size: .86rem; }
.kf-gw-status > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: .6rem; align-items: baseline; }
.kf-gw-status dt { font-weight: 700; color: var(--kf-muted); font-size: .8rem; }
.kf-gw-status dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .kf-gw-status > div { grid-template-columns: 1fr; gap: .1rem; } }
.kf-gw-test { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.kf-gw-test small { color: var(--kf-muted); }
.kf-gw-note { font-size: .84rem; color: var(--kf-muted); margin: .6rem 0 0; }
.kf-gw-note--warn { color: var(--kf-madder); font-weight: 600; }
.kf-gw-providers { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .4rem; }
.kf-gw-providers li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; padding: .6rem .8rem; border-radius: 12px; border: 1px solid var(--kf-line); background: var(--kf-surface-2); font-size: .86rem; }

/* ================================================================ ABOUT PAGE */
.kf-about-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: 0 0 1.8rem; }
@media (max-width: 767.98px) { .kf-about-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kf-about-figures > div { display: flex; flex-direction: column-reverse; gap: .2rem; padding: 1rem 1.1rem; border-radius: 16px; color: var(--tink); background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 12px 26px -18px var(--t2); }
.kf-about-figures dd { margin: 0; font: 600 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1 var(--kf-font-display); }
.kf-about-figures dt { font-size: .8rem; font-weight: 600; opacity: .9; }
.kf-about-words { margin-bottom: 1.8rem; }
.kf-about-sec { margin-bottom: 2.2rem; }
.kf-about-sec > h2 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); margin: .2rem 0 1rem; }
.kf-glance-joined { font-weight: 600; font-size: .74rem; color: var(--kf-muted); }

/* ================================================================ GUIDELINES PAGE */
.kf-gl { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.kf-gl-card { display: flex; gap: .9rem; align-items: flex-start; padding: 1.15rem 1.2rem; border-top: 3px solid var(--t1); }
.kf-gl-card .kf-me-ico { width: 2.2rem; height: 2.2rem; border-radius: 11px; }
.kf-gl-card .kf-me-ico .kf-icon { width: 1.05rem; height: 1.05rem; }
.kf-gl-card h2 { font-size: 1.05rem; margin: .25rem 0 .55rem; }
.kf-gl-card .kf-tips { margin: 0; font-size: .9rem; }
.kf-gl-report { margin-bottom: 1rem; }
.kf-gl > .kf-card { margin: 0; }

/* ================================================================ DIRECTORY: MY RELATIVES */
.kf-dir-circle-note { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 1.4rem; padding: .8rem 1rem; border-radius: 14px; font-size: .88rem; color: var(--kf-text); background: color-mix(in srgb, var(--kf-emerald) 9%, var(--kf-surface)); border: 1px solid color-mix(in srgb, var(--kf-emerald) 25%, transparent); }
.kf-dir-circle-note .kf-icon { color: var(--kf-emerald); margin-top: .15rem; }
.kf-dir-tag--joined { color: var(--kf-emerald); border-color: color-mix(in srgb, var(--kf-emerald) 35%, transparent); background: color-mix(in srgb, var(--kf-emerald) 10%, transparent); }
.kf-dir-tag--waiting { color: var(--kf-muted); border-style: dashed; }
.kf-dir-invite { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .35rem; margin: .1rem auto .5rem; padding: .3rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 700; text-decoration: none; color: var(--kf-gold-ink); background: var(--kf-saffron-tint); border: 1px solid var(--kf-gold-soft); }
.kf-dir-invite:hover { color: var(--kf-gold-ink); border-color: var(--kf-gold); }
:root[data-theme="dark"] .kf-dir-invite { color: var(--kf-gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kf-dir-invite { color: var(--kf-gold); } }

/* The hero photo is a dome: anchor the crop near the top so the spire stays in view. */
.kf-hero3-poster img, .kf-hero3-poster img[src] { object-position: center 22%; }
@media (max-width: 575.98px) { .kf-hero3-poster img { object-position: center 22%; min-height: 240px; } }

/* ================================================================ MAIN TITLES
 * Each page's main title (h1) is set in Cinzel: Roman inscriptional capitals,
 * the free counterpart of the Trajan used by Rajasthan Tourism for Ajmer
 * Sharif. Lowercase letters render as small capitals. Bangla and Arabic text
 * falls through to the Noto faces, and the :lang(bn)/:lang(ar) rules above
 * keep their own title fonts. Section headings stay in Source Serif.
 */
:root { --kf-font-title: "Cinzel", "Noto Serif Bengali", "Noto Naskh Arabic", "Trajan Pro", Georgia, serif; }
h1 { font-family: var(--kf-font-title); font-weight: 600; letter-spacing: .02em; }
:lang(bn) h1 { font-family: "Noto Serif Bengali", var(--kf-font-display); letter-spacing: 0; }
:lang(ar) h1 { font-family: "Noto Naskh Arabic", var(--kf-font-display); letter-spacing: 0; }

/* ================================================================ PRIVACY PAGE */
.kf-pv-glance { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.kf-pv-glance li { display: grid; grid-template-columns: auto 1fr; gap: .15rem .7rem; align-items: center; padding: .9rem 1rem; border-radius: 14px; background: var(--kf-surface); border: 1px solid var(--kf-line); border-top: 3px solid var(--t1); }
.kf-pv-glance .kf-me-ico { grid-row: span 2; width: 2.1rem; height: 2.1rem; border-radius: 10px; }
.kf-pv-glance .kf-me-ico .kf-icon { width: 1rem; height: 1rem; }
.kf-pv-glance b { font-size: .95rem; }
.kf-pv-glance span:last-child { font-size: .82rem; color: var(--kf-muted); }
.kf-pv-scopes { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .9rem; }
.kf-pv-scopes li { display: grid; grid-template-columns: 6.5rem 1fr; gap: .6rem; align-items: baseline; }
.kf-pv-table { --bs-table-bg: transparent; font-size: .9rem; }
.kf-pv-table th[scope="row"] { font-weight: 600; }
.kf-gl--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767.98px) { .kf-gl--pairs { grid-template-columns: 1fr; } }

/* ================================================================ YOUR INFORMATION / CLOSE ACCOUNT */
.kf-mydata-close { color: var(--kf-madder); }
.kf-mydata-close:hover { color: var(--kf-madder); background: color-mix(in srgb, var(--kf-madder) 10%, transparent); }
.kf-close-blocked { border-color: color-mix(in srgb, var(--kf-madder) 40%, transparent); background: color-mix(in srgb, var(--kf-madder) 6%, var(--kf-surface)); }
.kf-pv-updated { display: inline-flex; align-items: center; gap: .4rem; margin: .4rem 0 0; font-size: .82rem; color: var(--kf-muted); }
.kf-pv-mail { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; overflow-wrap: anywhere; }

/* ================================================================ EVENTS: types, page head, RSVP, agenda, organiser list */
.kf-ev-types { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.4rem; }
.kf-ev-type { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem .3rem .35rem; border-radius: 999px; font-size: .84rem; font-weight: 600; color: var(--kf-text); text-decoration: none; background: var(--kf-surface); border: 1px solid var(--kf-line); }
.kf-ev-type:first-child { padding-inline-start: .75rem; }
.kf-ev-type .kf-me-ico { width: 1.4rem; height: 1.4rem; border-radius: 50%; }
.kf-ev-type .kf-me-ico .kf-icon { width: .72rem; height: .72rem; }
.kf-ev-type:hover { background: var(--tsoft, var(--kf-lapis-tint)); color: var(--kf-text); }
.kf-ev-type.is-on { border-color: var(--t1, var(--kf-primary)); background: var(--tsoft, var(--kf-lapis-tint)); box-shadow: inset 0 0 0 1px var(--t1, var(--kf-primary)); }
.kf-ev-cat { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; color: var(--tdeep); margin-bottom: .2rem; }
.kf-ev-cat .kf-me-ico { width: 1.25rem; height: 1.25rem; border-radius: 6px; }
.kf-ev-cat .kf-me-ico .kf-icon { width: .68rem; height: .68rem; }

.kf-evh { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 11rem; margin: .4rem 0 1.4rem; border-radius: 20px; color: var(--kf-cream);
  background: radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--t1) 45%, transparent), transparent 45%), linear-gradient(135deg, var(--kf-night), var(--kf-night-2) 65%, var(--kf-shrine)); }
.kf-evh::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--kf-gold); opacity: .22;
  -webkit-mask: var(--kf-orn-jali) 0 0 / 44px 44px, linear-gradient(to left, #000 10%, transparent 80%); -webkit-mask-composite: source-in;
  mask: var(--kf-orn-jali) 0 0 / 44px 44px, linear-gradient(to left, #000 10%, transparent 80%); mask-composite: intersect; }
.kf-evh--cover { min-height: 16rem; }
.kf-evh-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.kf-evh--cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 20%, rgba(12, 26, 43, .88)); }
.kf-evh-body { padding: 1.4rem 1.6rem; }
.kf-evh h1 { color: #fff8e6; margin: .35rem 0 .4rem; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); text-wrap: balance; }
.kf-evh-type { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 700; color: var(--kf-cream); }
.kf-evh-type .kf-me-ico { width: 1.6rem; height: 1.6rem; border-radius: 8px; }
.kf-evh-meta { margin: 0; font-size: .9rem; color: color-mix(in srgb, var(--kf-cream) 85%, transparent); }
.kf-evh-meta .kf-icon { color: #f2c460; }

.kf-rsvp-facts { display: grid; gap: .45rem; margin: 0 0 1rem; font-size: .88rem; }
.kf-rsvp-facts > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .5rem; }
.kf-rsvp-facts dt { color: var(--kf-muted); font-weight: 600; font-size: .8rem; }
.kf-rsvp-facts dd { margin: 0; overflow-wrap: anywhere; }
.kf-rsvp-status { display: flex; align-items: center; gap: .45rem; margin: 0 0 .9rem; padding: .55rem .8rem; border-radius: 12px; font-weight: 700; font-size: .9rem; background: var(--kf-surface-2); border: 1px solid var(--kf-line); }
.kf-rsvp-status--registered { color: var(--kf-verdigris); background: var(--kf-verdigris-tint); border-color: color-mix(in srgb, var(--kf-verdigris) 35%, transparent); }
.kf-rsvp-status--waitlisted { color: var(--kf-gold-ink); background: var(--kf-saffron-tint); border-color: var(--kf-gold-soft); }
.kf-rsvp-buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .4rem; margin-top: .8rem; }
.kf-rsvp-buttons .btn { padding-inline: .4rem; }

.kf-agenda { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .1rem; }
.kf-agenda li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .8rem; padding: .55rem 0; border-bottom: 1px dashed var(--kf-line); }
.kf-agenda li:last-child { border-bottom: 0; }
.kf-agenda-time { font-family: var(--kf-font-mono); font-size: .86rem; color: var(--kf-gold-ink); font-weight: 500; }
.kf-agenda b { display: block; font-size: .95rem; }
.kf-agenda small { display: block; color: var(--kf-muted); font-size: .84rem; }
.kf-ev-updates { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; font-size: .9rem; }
.kf-ev-updates time { display: block; font-size: .76rem; color: var(--kf-muted); font-weight: 600; margin-bottom: .15rem; }

.kf-agenda-edit { display: grid; gap: .2rem; }
.kf-agenda-edit-row { display: grid; grid-template-columns: 7.5rem 1fr 1fr auto; gap: .6rem; align-items: start; }
.kf-agenda-edit-del { padding-top: 2rem; }
@media (max-width: 767.98px) { .kf-agenda-edit-row { grid-template-columns: 1fr; gap: 0; padding-bottom: .6rem; border-bottom: 1px dashed var(--kf-line); } .kf-agenda-edit-del { padding-top: 0; } }

.kf-att { list-style: none; margin: 0; padding: 0; }
.kf-att-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .55rem .2rem; border-bottom: 1px solid var(--kf-line); }
.kf-att-row:last-child { border-bottom: 0; }
.kf-att-row.is-in { background: linear-gradient(90deg, var(--kf-verdigris-tint), transparent 60%); }
.kf-att-who { min-width: 0; }
.kf-att-who small { display: block; color: var(--kf-muted); font-size: .8rem; }
.kf-att-who .kf-att-in { color: var(--kf-verdigris); font-weight: 600; }
.kf-att-actions { display: flex; gap: .3rem; flex: none; }
.kf-att-remove { color: var(--kf-madder); }
.kf-evh-draft { display: inline-block; margin-bottom: .5rem; padding: .15rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700; color: #0F2236; background: linear-gradient(135deg, #FFE7A3, #E2AD48); }

/* ================================================================ REPORTS */
.kf-report-tiles { max-width: 60rem; }
.kf-report-figures { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.kf-report-list { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .1rem; font-size: .9rem; }
.kf-report-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed var(--kf-line); }
.kf-report-list li:last-child { border-bottom: 0; }
.kf-report-list b { font-variant-numeric: tabular-nums; }
.kf-gap { font-size: .7rem; margin-bottom: .15rem; }
.kf-act-table td, .kf-act-table th { white-space: nowrap; }
.kf-act-bar { display: inline-block; vertical-align: middle; width: 4rem; height: .45rem; margin-inline-end: .5rem; border-radius: 999px; background: var(--kf-surface-2); overflow: hidden; }
.kf-act-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--t1), var(--t2)); }

/* ================================================================ DIRECTORY: PDF list */
.kf-dir-pdf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin: 0 0 1rem; padding: .6rem .8rem; border-radius: 14px; background: var(--kf-surface); border: 1px solid var(--kf-line); }
.kf-dir-pdf > .kf-icon { color: var(--kf-gold); }
.kf-dir-pdf form { margin: 0; }
.kf-dir-pdf small { color: var(--kf-muted); }
/* No tile around the box: the label is a bigger, invisible hit area. */
.kf-dir-pick { position: absolute; z-index: 2; top: .45rem; inset-inline-end: .45rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 6px; cursor: pointer; }
/* Drawn by hand: the browser's own box has a heavy 2px black frame. */
.kf-dir-pick input { appearance: none; -webkit-appearance: none; width: 1.05rem; height: 1.05rem; margin: 0; border: 1px solid rgba(255, 255, 255, .85); border-radius: 4px; background: rgba(255, 255, 255, .95) center / 75% no-repeat; box-shadow: 0 1px 3px rgba(10, 20, 35, .35); cursor: pointer; transition: background-color .15s, border-color .15s; }
.kf-dir-pick input:hover { border-color: var(--kf-emerald); }
.kf-dir-pick input:checked { border-color: #fff; background-color: var(--kf-emerald); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E"); }
.kf-dir-pick input:focus-visible { outline: none; }
@media (forced-colors: active) { .kf-dir-pick input { appearance: auto; -webkit-appearance: auto; } }
.kf-dir-pick:focus-within { outline: 2px solid var(--kf-gold); outline-offset: 2px; }

/* ================================================================ ACCESSIBILITY FIXES */
/* Living-person initials: the verdigris on its tint was 4.11:1; this ink is 5.21:1 (dark mode is already 5+:1). */
:root { --kf-verdigris-ink: #336B5F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kf-verdigris-ink: var(--kf-verdigris); } }
:root[data-theme="dark"] { --kf-verdigris-ink: var(--kf-verdigris); }
.kf-avatar--living { color: var(--kf-verdigris-ink); }

/* ================================================================ HOME HERO: copy rises over the photo
 * The night band slides up over the lower part of the photo; a gradient that
 * starts clear and deepens to the band colour keeps the title and figures
 * readable over the lit dome. The credit moves to the top corner.
 */
.kf-hero3 { --kf-hero-overlap: clamp(8rem, 15vw, 15rem); }
.kf-hero3-poster, .kf-hero3-poster img, .kf-hero3-poster img[src] { max-height: 88vh; }
.kf-hero3-poster::after { display: none; }
.kf-hero3-band {
  margin-top: calc(-1 * var(--kf-hero-overlap));
  background: linear-gradient(180deg, rgba(12, 26, 43, 0) 0, rgba(12, 26, 43, .55) calc(var(--kf-hero-overlap) * .45),
    rgba(12, 26, 43, .92) calc(var(--kf-hero-overlap) * .85), #0c1a2b var(--kf-hero-overlap), #12304a 82%, #134a3c 100%);
}
.kf-hero3-band::before {
  -webkit-mask: var(--kf-orn-jali) 0 0 / 44px 44px, linear-gradient(to bottom, transparent calc(var(--kf-hero-overlap) * .55), #000 calc(var(--kf-hero-overlap) * 1.15));
  -webkit-mask-composite: source-in;
  mask: var(--kf-orn-jali) 0 0 / 44px 44px, linear-gradient(to bottom, transparent calc(var(--kf-hero-overlap) * .55), #000 calc(var(--kf-hero-overlap) * 1.15));
  mask-composite: intersect;
}
.kf-hero3-inner { padding-block: 0 3rem; }
.kf-hero3 h1, .kf-hero3 .kf-hero2-lede { text-shadow: 0 2px 18px rgba(4, 10, 20, .75), 0 1px 2px rgba(4, 10, 20, .6); }
.kf-hero3 .kf-hero2-lede { color: rgba(255, 255, 255, .92); }
.kf-hero3 .kf-hero2-eyebrow { background: rgba(12, 26, 43, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kf-hero3-figures div { background: rgba(12, 26, 43, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 991.98px) { .kf-hero3 { --kf-hero-overlap: 6rem; } }
@media (max-width: 575.98px) { .kf-hero3 { --kf-hero-overlap: 3.5rem; } }
@media (prefers-reduced-transparency: reduce) { .kf-hero3 .kf-hero2-eyebrow, .kf-hero3-figures div { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0c1a2b; } }
/* The home photo's licence credit (CC BY-SA) sits in the footer of the home page. */
.kf-footer-credit { margin: 1.4rem 0 0; padding-top: .8rem; border-top: 1px solid var(--kf-line); font-size: .74rem; color: var(--kf-muted); }
.kf-footer-credit a { color: inherit; }

/* ================================================================ HOME: how a relative joins
 * Four numbered steps, each with a tinted icon tile; a dashed gold path joins
 * the tiles on wide screens.
 */
.kf-howjoin { counter-reset: none; list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kf-howjoin-step { position: relative; padding: 1.1rem 1rem 1rem; border-radius: 18px; background: var(--kf-surface); border: 1px solid var(--kf-line); box-shadow: var(--kf-lift); }
.kf-howjoin-step::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; border-radius: 18px 18px 0 0; background: linear-gradient(90deg, var(--t1), var(--t2)); }
.kf-howjoin-ico { position: relative; display: grid; place-items: center; width: 3.1rem; height: 3.1rem; margin-bottom: .8rem; border-radius: 15px; color: var(--tink); background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 10px 20px -12px var(--t2); }
.kf-howjoin-ico .kf-icon { width: 1.4rem; height: 1.4rem; }
.kf-howjoin-ico b { position: absolute; top: -.45rem; inset-inline-end: -.45rem; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; font: 700 .74rem/1 var(--kf-font-body); color: #0F2236; background: linear-gradient(135deg, #FFE7A3, #E2AD48); border: 2px solid var(--kf-surface); }
.kf-howjoin-step h3 { font-size: 1rem; margin: 0 0 .3rem; }
.kf-howjoin-step p { margin: 0; font-size: .88rem; color: var(--kf-muted); }
@media (min-width: 992px) {
  /* the path between one tile and the next */
  .kf-howjoin-step:not(:last-child) .kf-howjoin-ico::after { content: ""; position: absolute; top: 50%; inset-inline-start: calc(100% + .6rem); width: calc(100% + 3.6rem); border-top: 2px dashed var(--kf-gold-soft); pointer-events: none; }
}
@media (max-width: 991.98px) { .kf-howjoin { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .kf-howjoin { grid-template-columns: 1fr; } }

/* ================================================================ MESSAGES (laid out like the directory) */
.kf-msg-status { margin: 0; padding: 0; border: 0; display: grid; gap: .35rem; font-size: .9rem; }
.kf-msg-status legend { margin-bottom: .3rem; }
.kf-msg-who { margin: -.2rem 0 .5rem; font-size: .86rem; color: var(--kf-muted); }
.kf-msg-card.is-waiting { border-color: color-mix(in srgb, var(--kf-saffron) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--kf-saffron) 35%, transparent), var(--kf-lift); }
.kf-msg-new { color: var(--kf-gold-ink); background: var(--kf-saffron-tint); border-color: var(--kf-gold-soft); }

/* ================================================================ EVENTS: night banner (as the directory and messages) */
.kf-ev-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
@media (max-width: 767.98px) { .kf-ev-hero-actions { justify-content: flex-start; } }

/* ================================================================ STAT CARDS ON THE NIGHT BANNER (variant='hero') */
.kf-dir-hero-copy > p:last-child { margin-bottom: 0; }
.kf-stats--hero { grid-column: 1 / -1; margin: .4rem 0 0; gap: .8rem; }
.kf-stats--hero .kf-stat-card {
  padding: .85rem 1rem; border-radius: 14px; color: #fff8e6;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 243, 210, .16); box-shadow: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.kf-stats--hero a.kf-stat-card:hover { color: #fff8e6; background: rgba(255, 255, 255, .12); border-color: rgba(242, 196, 96, .5); box-shadow: none; }
.kf-stats--hero .kf-stat-orb { display: none; }
.kf-stats--hero .kf-stat-icon { width: 2.1rem; height: 2.1rem; border-radius: 10px; color: var(--tink); background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 6px 14px -6px var(--t2); }
.kf-stats--hero .kf-stat-icon .kf-icon { width: 1.1rem; height: 1.1rem; }
.kf-stats--hero .kf-stat-label { color: rgba(255, 243, 210, .78); opacity: 1; }
.kf-stats--hero .kf-stat-value { color: #f2c460; font-size: 1.7rem; }
.kf-stats--hero .kf-stat-hint { color: rgba(255, 243, 210, .7); opacity: 1; }
.kf-stats--hero a.kf-stat-card:focus-visible { outline-color: #ffe2a8; }
@media (max-width: 767.98px) { .kf-stats--hero { gap: .6rem; } .kf-stats--hero .kf-stat-hint { white-space: normal; } }

/* ================================================================ LINE OF DESCENT: night banner */
.kf-line-hero .kf-identity { display: flex; align-items: center; gap: 1.1rem; }
.kf-line-hero .kf-avatar { box-shadow: 0 0 0 3px var(--kf-night), 0 0 0 5px #f2c460; }
.kf-line-hero .kf-identity-meta { color: rgba(255, 243, 210, .78); margin: 0; }
.kf-line-hero h1 { margin: .1rem 0 .3rem; }
.kf-print-title { font-weight: 700; font-size: 1.2rem; margin-bottom: 1rem; }

/* ================================================================ NIGHT BANNER: links in the copy */
.kf-dir-hero-copy p a { color: #f2c460; text-decoration-color: rgba(242, 196, 96, .5); text-underline-offset: 3px; }
.kf-dir-hero-copy p a:hover { color: #ffd77a; }

/* ================================================================ POSSIBLE DUPLICATES */
.kf-line-hero .kf-dir-hero-copy p { margin-bottom: 0; }
.kf-dup-keep { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 1.2rem; padding: .8rem 1rem; border-radius: 14px;
  background: color-mix(in srgb, var(--kf-emerald) 9%, var(--kf-surface)); border: 1px solid color-mix(in srgb, var(--kf-emerald) 28%, transparent); }
.kf-dup-keep > .kf-icon { flex: none; margin-top: .2rem; color: var(--kf-emerald); }
.kf-dup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.kf-dup-card { background: var(--kf-surface); border: 1px solid var(--kf-line); border-inline-start: 4px solid var(--kf-line); border-radius: 16px; padding: 1rem 1.2rem; box-shadow: var(--kf-lift); }
.kf-dup-card.is-strong { border-inline-start-color: var(--kf-gold); }
.kf-dup-who { display: flex; gap: 1rem; align-items: flex-start; }
.kf-dup-who > .min-w-0 { flex: 1; }
.kf-dup-name { font-weight: 700; font-size: 1.08rem; }
.kf-dup-meta { color: var(--kf-muted); font-size: .88rem; }
.kf-dup-reasons { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.kf-dup-reasons li { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: color-mix(in srgb, var(--kf-emerald) 10%, var(--kf-surface)); color: var(--kf-text); }
.kf-dup-reasons .kf-icon { width: .8rem; height: .8rem; color: var(--kf-emerald); }
.kf-dup-score { flex: none; position: relative; display: grid; place-content: center; width: 4.2rem; height: 4.2rem; border-radius: 50%; text-align: center; line-height: 1;
  background: conic-gradient(var(--kf-gold) calc(var(--s, 0) * 1%), color-mix(in srgb, var(--kf-line) 70%, transparent) 0); }
.kf-dup-score::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--kf-surface); }
.kf-dup-score b, .kf-dup-score span { position: relative; }
.kf-dup-score b { font: 800 1.35rem/1 var(--kf-font-figure); }
.kf-dup-score span { font-size: .66rem; color: var(--kf-muted); text-transform: uppercase; letter-spacing: .06em; }
.kf-dup-merge { display: flex; gap: .6rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--kf-line); }
.kf-dup-merge input { flex: 1; min-width: 0; }
@media (max-width: 575.98px) { .kf-dup-merge { flex-direction: column; } }

/* ================================================================ ADMINISTRATION: night banner */
/* Many actions: the copy takes the full width and the buttons wrap beneath it. */
.kf-manage-hero { grid-template-columns: minmax(0, 1fr); }
.kf-manage-hero .kf-dir-hero-side { align-items: flex-start; }
.kf-manage-hero .kf-ev-hero-actions { justify-content: flex-start; }