/* Jyotish Gyan (Astrology Knowledge) page — bilingual, mobile-first 360-414px.
   Design tokens only; shloka card adapted from gita.css (incl. dark override). */

.kg-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px;
}

/* Bilingual spans: EN by default, NE when .lang-ne is set (mirrors panchanga) */
.kg-container .t-ne {
    display: none;
}

.kg-container.lang-ne .t-ne {
    display: inline;
}

.kg-container.lang-ne .t-en {
    display: none;
}

.kg-header {
    text-align: center;
    margin-bottom: 14px;
}

.kg-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.kg-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
}

/* === Sticky chip TOC (horizontally scrollable on mobile) === */
.kg-toc {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 2px;
    margin-bottom: 16px;
    background: var(--bg);
}

.kg-toc::-webkit-scrollbar {
    display: none;
}

.kg-toc-chip {
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--chip-bg);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.kg-toc-chip:hover {
    background: var(--surface-warm);
    color: var(--primary-text);
}

/* === Collapsible sections (site collapse-bar pattern) === */
.kg-section {
    margin-bottom: 22px;
    scroll-margin-top: 64px;
}

.kg-collapse-bar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 17px;
    font-weight: 700;
    text-align: left;
}

.kg-collapse-bar:hover {
    background: var(--surface-warm);
}

.kg-collapse-icon {
    font-size: 20px;
}

.kg-collapse-label {
    flex: 1;
}

.kg-collapse-chevron {
    transition: transform 0.25s;
    color: var(--text-muted);
}

.kg-collapse-bar[aria-expanded="false"] .kg-collapse-chevron {
    transform: rotate(-90deg);
}

.kg-section-body {
    padding-top: 14px;
}

.kg-section-body.collapsed {
    display: none;
}

/* === Prose + cards === */
.kg-prose {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 10px;
}

/* Devanagari needs generous line-height at mobile sizes */
.kg-container.lang-ne .kg-prose,
.kg-container.lang-ne .kg-card-title,
.kg-container.lang-ne .shastra-translation {
    line-height: 1.9;
}

.kg-section-intro {
    margin-bottom: 12px;
}

.kg-subheading {
    font-size: 17px;
    font-weight: 700;
    color: var(--subheading);
    margin: 20px 0 12px;
}

.kg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 14px;
}

.kg-card {
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(45, 21, 0, 0.06);
    scroll-margin-top: 64px;
}

.kg-wide-card {
    margin: 14px 0;
}

.kg-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.kg-glyph {
    font-size: 26px;
    line-height: 1;
    color: var(--primary-text);
}

.kg-bhava-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    flex: 0 0 auto;
}

.kg-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.kg-house-numbers {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    margin-left: 6px;
}

.kg-nature {
    font-size: 13px;
    color: var(--gold-text);
    font-weight: 600;
    margin-bottom: 6px;
}

.kg-karaka {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.6;
}

.kg-node-note {
    font-size: 13px;
    font-style: italic;
    color: var(--text-muted);
    margin-bottom: 10px;
    line-height: 1.6;
}

/* Dignity mini-table on graha cards */
.kg-dignity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 10px;
}

.kg-dignity-table th,
.kg-dignity-table td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--divider);
    text-align: left;
    vertical-align: top;
}

.kg-dignity-table th {
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
    width: 38%;
}

.kg-dignity-table td {
    color: var(--text-primary);
}

/* Chip rows on rashi/bhava cards */
.kg-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.kg-chip {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--chip-bg);
    border: 1px solid var(--divider);
    font-size: 12px;
    color: var(--text-secondary);
}

.kg-chip-group {
    background: var(--surface-warm);
    color: var(--primary-text);
    border-color: var(--card-border);
}

/* === Shastra Pramana (collapsible reference block) === */
.shastra-block {
    margin: 10px 0 4px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--surface-warm);
    padding: 0;
}

.shastra-summary {
    cursor: pointer;
    padding: 9px 14px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary-text);
    list-style: none;
}

.shastra-summary::-webkit-details-marker {
    display: none;
}

.shastra-ref {
    padding: 4px 14px 12px;
    border-top: 1px solid var(--divider);
}

.shastra-citation {
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 600;
    margin: 8px 0 8px;
    letter-spacing: 0.3px;
}

/* Shloka card — adapted from gita.css .shloka-card (parchment + dark override) */
.kg-shloka {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%);
    border: 1px solid rgba(217, 119, 6, 0.15);
    border-radius: 12px;
    padding: 16px 14px;
    margin-bottom: 8px;
    text-align: center;
}

.kg-shloka-sanskrit {
    font-family: 'Tiro Devanagari Sanskrit', 'Noto Sans Devanagari', 'Mangal', serif;
    font-size: 17px;
    line-height: 2;
    color: #78350f;
    font-weight: 600;
    white-space: pre-line;
    margin-bottom: 8px;
}

.kg-shloka-transliteration {
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--warn-text);
    font-style: italic;
    white-space: pre-line;
    margin: 0;
}

.kg-verify-note {
    font-size: 11.5px;
    color: var(--text-faint);
    font-style: italic;
    margin: 0 0 8px;
}

.shastra-translation {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-primary);
    margin: 0;
}

/* === Wide data tables (nakshatras, dasha) — scroll inside on mobile === */
.kg-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 14px;
}

.kg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.kg-table th,
.kg-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--divider);
    text-align: left;
    white-space: nowrap;
}

.kg-table th {
    color: var(--text-muted);
    font-weight: 700;
    background: var(--chip-bg);
}

.kg-table td {
    color: var(--text-primary);
}

.kg-table tr:last-child td {
    border-bottom: none;
}

.kg-span-cell {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.kg-table-total td {
    font-weight: 700;
    background: var(--surface-warm);
}

/* === Dignity ladder (section 6) === */
.kg-ladder {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0 0 12px;
}

.kg-ladder-rung {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    background: var(--chip-bg);
    border: 1px solid var(--card-border);
    font-size: 13px;
    color: var(--text-primary);
}

.kg-ladder-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    flex: 0 0 auto;
}

/* === Functional natures selector (section 7) === */
.kg-select-label {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.kg-select {
    width: 100%;
    max-width: 320px;
    padding: 9px 12px;
    font-size: 15px;
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid var(--input-border, var(--card-border));
    border-radius: 10px;
    margin-bottom: 12px;
}

.kg-fn-chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
}

.kg-fn-benefic {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success-border);
}

.kg-fn-malefic {
    background: var(--error-bg);
    color: var(--error-text);
    border-color: var(--error-border);
}

.kg-fn-neutral {
    background: var(--chip-bg);
    color: var(--text-secondary);
    border-color: var(--divider);
}

.kg-fn-yogakaraka {
    background: var(--warn-bg);
    color: var(--warn-text);
    border-color: var(--warn-border);
}

/* === Varga cards (section 10) === */
.kg-varga-d {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 26px;
    padding: 0 8px;
    border-radius: 8px;
    background: var(--accent-gradient);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    flex: 0 0 auto;
}

.kg-varga-rule {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 8px;
}

/* === Panchanga link (section 11) === */
.kg-panchanga-link {
    margin-top: 12px;
    font-weight: 600;
}

.kg-panchanga-link a {
    color: var(--primary-text);
    text-decoration: none;
}

.kg-panchanga-link a:hover {
    text-decoration: underline;
}

/* === Disclaimer box === */
.kg-disclaimer {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    color: var(--warn-text);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.7;
    margin-top: 14px;
}

.kg-footer-note {
    text-align: center;
    font-size: 13px;
    font-style: italic;
    color: var(--text-faint);
    margin: 24px 0 8px;
    line-height: 1.7;
}

/* === Dark theme === */
[data-theme="dark"] .kg-shloka {
    background: linear-gradient(135deg, #1f1204 0%, #2a1808 50%, #33200a 100%);
    border-color: rgba(255, 184, 0, 0.22);
}

[data-theme="dark"] .kg-shloka-sanskrit {
    color: #fcd34d;
}

[data-theme="dark"] .kg-card {
    box-shadow: none;
}

/* === Mobile (TWA 360-414px) === */
@media (max-width: 600px) {
    .kg-title {
        font-size: 21px;
    }

    .kg-grid {
        grid-template-columns: 1fr;
    }

    .kg-collapse-bar {
        font-size: 15px;
        padding: 11px 13px;
    }

    .kg-shloka-sanskrit {
        font-size: 15.5px;
        line-height: 2.1;
    }

    .kg-prose {
        font-size: 14.5px;
    }

    .kg-table {
        font-size: 12.5px;
    }

    .kg-table th,
    .kg-table td {
        padding: 7px 9px;
    }
}