/* Fonts: Malayalam glyphs from Noto Sans Malayalam, Latin from Manrope (unicode-range keeps each to its script). */
@font-face {
    font-family: "Tharavad Sans";
    src: url("../fonts/noto-sans-malayalam-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0307, U+0323, U+0951-0952, U+0964-0965, U+0D00-0D7F, U+1CDA, U+1CF2, U+200C-200D, U+25CC;
}
@font-face {
    font-family: "Tharavad Sans";
    src: url("../fonts/manrope-latin-wght.woff2") format("woff2");
    font-weight: 200 800;
    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;
}

/* Theme: navy primary, gold accent (borders and fills only: gold text fails 4.5:1 on cream), cream page. */
:root {
    --th-navy: #26365E;
    --th-navy-dark: #1B2745;
    --th-gold: #C8893A;
    --th-gold-text: #7A4E16;      /* 6.6:1 on cream; use instead of gold for text */
    --th-gold-tint: #F4E7D3;
    --th-cream: #F6F4EF;
    --th-card: #FFFFFF;
    --th-line: #E6E2D9;            /* card borders (design tokens) */
    --th-connector: #D3CEC3;
    --th-ink: #1F2433;
    --th-focus-bg: #E6EBF5;
    --th-muted: #5A6174;          /* 5.6:1 on cream */
    --th-deceased-bg: #EEEBE4;
    --bs-body-font-family: "Tharavad Sans", system-ui, sans-serif;
    --bs-body-bg: var(--th-cream);
    --bs-body-color: var(--th-ink);
    --bs-link-color: var(--th-navy);
    --bs-link-color-rgb: 38, 54, 94;
    --bs-link-hover-color: var(--th-navy-dark);
    --bs-link-hover-color-rgb: 27, 39, 69;
}

/* Malayalam needs more line height than Latin. */
:lang(ml) {
    line-height: 1.7;
}

/* 44 px minimum touch target (CLAUDE.md, accessibility). */
.btn-touch {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon {
    width: 24px;
    height: 24px;
    flex: none;
}

/* ---- Header and bottom navigation */
.site-header {
    background: var(--th-navy);
    color: #fff;
}
.site-brand {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    padding: 10px 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.site-brand:hover { color: #fff; }
.btn-header {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .6);
}
.btn-header:hover { color: var(--th-navy); background: #fff; }

body.has-bottom-nav { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.bottom-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1030;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--th-card);
    border-top: 1px solid var(--th-line);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
}
.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    color: var(--th-muted);
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
}
.bottom-nav-item .icon { width: 26px; height: 26px; }
.bottom-nav-item.active { color: var(--th-navy); font-weight: 700; }

/* ---- Tree (design 04-family-tree) */
.tree-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin: .5rem 0 1rem;
}
.tree-title { font-size: 1.9rem; font-weight: 800; color: var(--th-ink); margin: 0; letter-spacing: -.01em; }
.tree-meta { margin: 0; color: var(--th-muted); font-size: .9rem; font-weight: 600; }
.tree-helper { color: var(--th-muted); font-size: .95rem; margin: 0 0 .75rem; }
.section-title { font-size: 1rem; font-weight: 700; color: var(--th-ink); margin: 1.25rem 0 .5rem; }

.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1rem; }
.chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--th-line);
    background: var(--th-card);
    color: var(--th-ink);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
}
.chip:hover { border-color: var(--th-navy); }
.chip.active { background: var(--th-navy); border-color: var(--th-navy); color: #fff; }

/* The line: number circles on a vertical connector, cards to the right. */
.line, .vocation-list { list-style: none; padding: 0; margin: 0; }
.line-row {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    padding-bottom: .6rem;
}
.line > .line-row:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 34px;
    bottom: 0;
    width: 2px;
    background: var(--th-connector);
}
.gen-dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--th-navy);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
}
.gen-dot.is-root { background: var(--th-gold); color: var(--th-navy-dark); }   /* 5:1 */

.line-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 44px;
    padding: .8rem 1rem;
    background: var(--th-card);
    border: 1px solid var(--th-line);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
}
.line-card:hover, .grid-card:hover { border-color: var(--th-navy); }
.line-card.is-focus { background: var(--th-focus-bg); border: 2px solid var(--th-navy); padding: calc(.8rem - 1px) calc(1rem - 1px); }
.lc-main { display: flex; flex-direction: column; min-width: 0; }
.lc-name { font-size: 1.1rem; font-weight: 800; color: var(--th-ink); overflow-wrap: anywhere; }
.lc-sub { font-size: .9rem; color: var(--th-muted); overflow-wrap: anywhere; }
.lc-count { flex: none; font-size: .9rem; color: var(--th-muted); white-space: nowrap; }

.card-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}
.card-grid > li { display: flex; }
.grid-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 44px;
    padding: .65rem .8rem;
    background: var(--th-card);
    border: 1px solid var(--th-line);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.gc-name { font-size: 1rem; font-weight: 800; color: var(--th-ink); }
.gc-sub { font-size: .85rem; color: var(--th-muted); }
.gc-sub.is-vocation { color: var(--th-gold-text); font-weight: 700; }
.gc-count { font-size: .8rem; color: var(--th-muted); margin-top: .1rem; }
.vocation-list .grid-card { margin-bottom: .1rem; }

/* Deceased: dagger and a slightly muted name (spec F-02 §5). */
.is-deceased .lc-name, .is-deceased .gc-name { color: #3E4456; }
.dagger { font-weight: 600; color: var(--th-muted); }

@media (min-width: 768px) {
    .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}