/* ==========================================================================
   COMPONENTS - buttons, cards, badges, header, footer, forms, states
   ========================================================================== */

/* ---- buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6); border-radius: var(--r-full);
  font-weight: 600; font-size: var(--text-small); line-height: 1.2;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--heritage-deep); color: var(--text-inverse); box-shadow: var(--shadow-2); }
.btn--primary:hover { background: var(--heritage-deep-soft); color: var(--text-inverse); }
.btn--gold { background: var(--grad-gold); color: #2A2008; box-shadow: var(--shadow-gold); }
.btn--gold:hover { color: #2A2008; filter: brightness(1.05); }
.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text-primary); }
.btn--ghost:hover { border-color: var(--heritage-gold); color: var(--heritage-gold); }
.btn--onDark { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.28);
               backdrop-filter: blur(6px); }
.btn--onDark:hover { background: rgba(255,255,255,.18); color: #fff; }
.btn--sm { padding: var(--sp-2) var(--sp-4); font-size: var(--text-caption); }
.btn--block { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .5; pointer-events: none; }

/* ---- cards ------------------------------------------------------------ */
.card {
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card--link { display: block; text-decoration: none; color: inherit; }
.card--link:hover { box-shadow: var(--shadow-3); transform: translateY(-2px);
                    border-color: var(--heritage-gold-soft); color: inherit; }
.card__title { font-size: var(--text-h3); margin-bottom: var(--sp-2); }
.card__meta { font-size: var(--text-small); color: var(--text-secondary); }

/* ---- person card ------------------------------------------------------ */
.person-card {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--shadow-1);
  border-inline-start: 3px solid var(--identity-unknown);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  text-decoration: none; color: inherit;
}
.person-card:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); color: inherit; }
.person-card[data-gender="male"]   { border-inline-start-color: var(--identity-male); }
.person-card[data-gender="female"] { border-inline-start-color: var(--identity-female); }
.person-card[data-deceased="true"] { background: var(--surface-sunken); }

.avatar {
  inline-size: 52px; block-size: 52px; border-radius: var(--r-full); flex: none;
  display: grid; place-items: center; font-family: var(--font-display);
  font-size: var(--text-h3); font-weight: 600; color: var(--text-inverse);
  background: var(--heritage-deep); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}
.avatar[data-gender="male"]   { background: var(--identity-male); }
.avatar[data-gender="female"] { background: var(--identity-female); }
.avatar[data-unnamed="true"]  { background: var(--identity-unknown); font-size: var(--text-body); }
.avatar--lg { inline-size: 96px; block-size: 96px; font-size: var(--text-h1); }

.person-card__body { min-width: 0; flex: 1; }
.person-name-ur { font-family: var(--font-display-ur); font-size: var(--text-h3);
                  line-height: 1.8; direction: rtl; unicode-bidi: isolate; }
.person-name-en { font-family: var(--font-display); font-size: var(--text-h3);
                  line-height: var(--lh-h3); }
/* The product's visual signature (20 §3): display name, body-font father beneath */
.person-father { font-family: var(--font-body); font-size: var(--text-small);
                 color: var(--text-secondary); }
.person-father__ur { font-family: var(--font-body-ur); direction: rtl; unicode-bidi: isolate; }

/* ---- badges ----------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px var(--sp-3); border-radius: var(--r-full);
  font-size: var(--text-caption); font-weight: 600; line-height: 1.5;
  border: 1px solid currentColor; background: transparent;
}
.badge--verified   { color: var(--status-verified); }
.badge--partial    { color: var(--status-partial); }
.badge--pending    { color: var(--status-pending); }
.badge--unverified { color: var(--status-unverified); }
.badge--deceased   { color: var(--status-deceased); }
.badge--error      { color: var(--status-error); }
.badge--info       { color: var(--status-info); }
.badge--gold       { color: var(--heritage-gold); }
.badge--male       { color: var(--identity-male); }
.badge--female     { color: var(--identity-female); }
.badge--solid { background: var(--surface-sunken); }

/* ---- forms / search --------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.label { font-size: var(--text-small); font-weight: 600; color: var(--text-secondary); }
.input, .select {
  inline-size: 100%; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-raised); color: var(--text-primary);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:focus, .select:focus { border-color: var(--heritage-gold); box-shadow: 0 0 0 3px rgba(176,141,63,.18); }
.input::placeholder { color: var(--text-muted); }

.searchbar { position: relative; display: flex; gap: var(--sp-2); }
.searchbar .input { padding-inline-start: 46px; font-size: var(--text-body); }
.searchbar__icon {
  position: absolute; inset-inline-start: var(--sp-4); inset-block-start: 50%;
  transform: translateY(-50%); color: var(--text-muted); pointer-events: none;
}
.searchbar--hero .input {
  padding-block: var(--sp-4); border-radius: var(--r-full);
  border-color: transparent; box-shadow: var(--shadow-3); font-size: 1.0625rem;
}

.suggest {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline: 0;
  background: var(--surface-overlay); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3); overflow: hidden;
  z-index: 60; max-block-size: 340px; overflow-y: auto;
}
.suggest__item {
  display: flex; gap: var(--sp-3); align-items: center; width: 100%;
  padding: var(--sp-3) var(--sp-4); background: none; border: 0; cursor: pointer;
  text-align: start; border-bottom: 1px solid var(--border-subtle);
}
.suggest__item:last-child { border-bottom: 0; }
.suggest__item:hover, .suggest__item[aria-selected="true"] { background: var(--surface-sunken); }

/* ---- header ----------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100; background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
}
.header__bar { display: flex; align-items: center; gap: var(--sp-6);
               block-size: var(--header-h); }
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none;
         color: var(--text-primary); flex: none; }
.brand:hover { color: var(--text-primary); }
.brand__mark { inline-size: 36px; block-size: 36px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; }
.brand__sub { font-size: var(--text-caption); color: var(--text-muted); }

.nav { display: flex; align-items: center; gap: var(--sp-1); margin-inline-start: auto; }
.nav__link {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); text-decoration: none;
  color: var(--text-secondary); font-size: var(--text-small); font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link:hover { background: var(--surface-sunken); color: var(--text-primary); }
.nav__link[aria-current="page"] { color: var(--heritage-deep); font-weight: 600;
                                  background: var(--surface-sunken); }
:root[data-theme="dark"] .nav__link[aria-current="page"] { color: var(--heritage-gold-soft); }

.menu { position: relative; }
.menu__panel {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0;
  min-inline-size: 230px; background: var(--surface-overlay);
  border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); padding: var(--sp-2); display: none; z-index: 110;
}
.menu[data-open="true"] .menu__panel { display: block; }
.menu__panel a {
  display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  text-decoration: none; color: var(--text-secondary); font-size: var(--text-small);
}
.menu__panel a:hover { background: var(--surface-sunken); color: var(--text-primary); }
.menu__group { font-size: var(--text-caption); color: var(--text-muted);
               padding: var(--sp-2) var(--sp-3) 4px; font-weight: 600;
               letter-spacing: .08em; text-transform: uppercase; }

.header__tools { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.icon-btn {
  inline-size: 38px; block-size: 38px; display: grid; place-items: center;
  border-radius: var(--r-md); border: 1px solid var(--border-subtle);
  background: var(--surface-raised); cursor: pointer; color: var(--text-secondary);
}
.icon-btn:hover { border-color: var(--heritage-gold); color: var(--heritage-gold); }
.nav-toggle { display: none; }

.drawer {
  position: fixed; inset: 0; z-index: 150; background: var(--surface-canvas);
  padding: var(--sp-6); overflow-y: auto;
  transform: translateX(100%); transition: transform var(--dur-slow) var(--ease);
  visibility: hidden;
}
[dir="rtl"] .drawer { transform: translateX(-100%); }
.drawer[data-open="true"] { transform: translateX(0); visibility: visible; }
.drawer__head { display: flex; justify-content: space-between; align-items: center;
                margin-bottom: var(--sp-6); }
.drawer a { display: block; padding: var(--sp-3) 0; text-decoration: none;
            color: var(--text-primary); border-bottom: 1px solid var(--border-subtle);
            font-size: var(--text-body); }
.drawer__group { margin-top: var(--sp-6); }

/* ---- footer ----------------------------------------------------------- */
.footer { background: var(--grad-heritage); color: #E8E4DC; margin-top: var(--sp-16);
          padding-block: var(--sp-16) var(--sp-8); }
.footer a { color: #C9C3B8; text-decoration: none; font-size: var(--text-small); }
.footer a:hover { color: var(--heritage-gold-soft); }
.footer h3 { color: #fff; font-size: var(--text-small); text-transform: uppercase;
             letter-spacing: .1em; font-family: var(--font-body); margin-bottom: var(--sp-4); }
:root[lang="ur"] .footer h3 { text-transform: none; letter-spacing: normal; }
.footer__grid { display: grid; gap: var(--sp-8);
                grid-template-columns: 1.6fr repeat(auto-fit, minmax(150px, 1fr)); }
.footer__links { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer__bottom { margin-top: var(--sp-12); padding-top: var(--sp-6);
                  border-top: 1px solid rgba(255,255,255,.14);
                  display: flex; justify-content: space-between; gap: var(--sp-4);
                  flex-wrap: wrap; font-size: var(--text-caption); color: #9E988C; }

/* ---- states (38) ------------------------------------------------------ */
.state {
  text-align: center; padding: var(--sp-12) var(--sp-6);
  border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
  background: var(--surface-sunken); color: var(--text-secondary);
}
.state__icon { font-size: 2rem; margin-bottom: var(--sp-3); opacity: .65; }
.state__title { font-family: var(--font-display); font-size: var(--text-h3);
                color: var(--text-primary); margin-bottom: var(--sp-2); }
.state__msg { font-size: var(--text-small); max-inline-size: 52ch; margin-inline: auto; }
.state--error { border-color: var(--status-error); color: var(--status-error); }

.skeleton {
  background: linear-gradient(90deg, var(--surface-sunken) 25%,
              var(--border-subtle) 37%, var(--surface-sunken) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
  border-radius: var(--r-md);
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton--line { block-size: 14px; margin-block: 6px; }
.skeleton--card { block-size: 92px; }

/* Data-pending notice: used wherever the source documents hold no value */
.notice {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--surface-sunken); border-inline-start: 3px solid var(--status-pending);
  font-size: var(--text-small); color: var(--text-secondary);
}
.notice--info { border-inline-start-color: var(--status-info); }
.notice--verified { border-inline-start-color: var(--status-verified); }

/* ---- stat tiles ------------------------------------------------------- */
.stat {
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: var(--sp-6); text-align: center;
  position: relative; overflow: hidden;
}
.stat::after { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
               block-size: 3px; background: var(--grad-gold); opacity: .8; }
.stat__value { font-family: var(--font-display); font-size: 2.25rem; font-weight: 600;
               line-height: 1.1; color: var(--heritage-deep); }
:root[data-theme="dark"] .stat__value { color: var(--heritage-gold-soft); }
.stat__label { font-size: var(--text-small); color: var(--text-secondary); margin-top: var(--sp-2); }
.stat__value--pending { font-size: var(--text-body); color: var(--text-muted);
                        font-family: var(--font-body); font-style: italic; }

/* ---- breadcrumbs ------------------------------------------------------ */
.crumbs { font-size: var(--text-small); color: var(--text-muted);
          padding-block: var(--sp-4); display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.crumbs a { color: var(--text-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--heritage-gold); }

/* ---- page header ------------------------------------------------------ */
.page-head { background: var(--grad-heritage); color: #F0EDE6; padding-block: var(--sp-12); }
.page-head h1 { color: #fff; }
.page-head p { color: #C9C3B8; max-inline-size: 66ch; margin-top: var(--sp-3); }
.page-head .eyebrow { color: var(--heritage-gold-soft); }

/* ---- tabs ------------------------------------------------------------- */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border-subtle);
        overflow-x: auto; }
.tab {
  padding: var(--sp-3) var(--sp-4); background: none; border: 0; cursor: pointer;
  color: var(--text-secondary); font-size: var(--text-small); font-weight: 600;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab[aria-selected="true"] { color: var(--heritage-deep); border-bottom-color: var(--heritage-gold); }
:root[data-theme="dark"] .tab[aria-selected="true"] { color: var(--heritage-gold-soft); }

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 1000px) {
  .nav { display: none; }
  .nav-toggle { display: grid; }
  /* brand must yield space to the tools rather than push them off-screen */
  .brand { min-width: 0; flex: 1 1 auto; }
  .brand__text { min-width: 0; }
  .brand__name, .brand__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header__tools { margin-inline-start: auto; }
}
@media (max-width: 640px) {
  :root { --text-display: 2rem; --text-h1: 1.625rem; --text-h2: 1.375rem; }
  .wrap { padding-inline: var(--sp-4); }
  .section { padding-block: var(--sp-12); }
  .footer__grid { grid-template-columns: 1fr; }
  .card, .stat { padding: var(--sp-4); }
  .brand__sub { display: none; }
  .header__tools { gap: var(--sp-1); }
  .icon-btn { inline-size: 36px; block-size: 36px; }
  .hero__stats { gap: var(--sp-6); }
  .rel-result { padding: var(--sp-6) var(--sp-4); }
  .factlist div { flex-direction: column; gap: 2px; }
  .factlist dd { text-align: start; }
}