/* ══════════════════════════════════════════════════════════════════════════
   TALLAPATRA — CANONICAL COMPONENT LIBRARY
   Design doc §9 Core components · §10 State system · §11 Elevation/shape

   Every repeated pattern has exactly ONE implementation here. Pages compose
   these; pages never restyle component internals (§27).

   No raw values — every declaration resolves to a --tp-* token.

   State priority (§10): Disabled > Loading > Error > Selected > Focus >
   Pressed > Hover > Default. Error never removes the focus indicator.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   1. PAGE SHELL / HEADER / TITLE BLOCK / BREADCRUMB
   ══════════════════════════════════════════════════════════════════ */
.page-shell,
.tp-page-shell,
.tp-main,
.site-content-wrapper {
    width: 100%;
    min-width: 0;
    padding-block: var(--tp-space-2, 0.5rem) var(--tp-space-4);
}

.page-container,
.tp-page-container {
    width: 100%;
    max-width: var(--tp-layout-max);
    margin-inline: auto;
    padding-inline-start: max(var(--tp-layout-gutter), var(--tp-safe-left));
    padding-inline-end: max(var(--tp-layout-gutter), var(--tp-safe-right));
    min-width: 0;
}

.page-template,
.tp-page-template {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--tp-space-4);
}

/* Pages that combine page-template with Bootstrap .row (e.g. Index, MatchmakingResult)
   need Bootstrap's flex-wrap:wrap row layout, not our column stack.
   Bootstrap's g-3 gutter (1rem = 16px) provides the row gap natively. */
.page-template.row,
.tp-page-template.row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0; /* Bootstrap handles gutters via padding on col-* children */
}

.page-template > *,
.tp-page-template > * {
    min-width: 0;
    /* Never set margin-block here — that breaks Bootstrap internals inside cards */
}

/* Master-layout render slots (§7.1–§7.4.1). Neither slot is a card: the
   shared container owns horizontal gutters and page components own padding. */
.tp-main__container,
.tp-page-slot {
    min-width: 0;
}

.tp-page-slot {
    padding: 0;
}

.tp-global-message-area {
    display: grid;
    gap: var(--tp-space-3);
    margin-block-end: var(--tp-shell-message-gap);
}

.tp-global-message-area:empty {
    display: none;
    margin-block-end: 0;
}

/* Shared compact primitives used by shell/toolbars and reusable components. */
.tp-link {
    color: var(--tp-text-link);
    text-decoration: none;
}

.tp-link:hover,
.tp-link:focus-visible {
    color: var(--tp-action-primary-hover);
    text-decoration: underline;
}

.tp-label--utility {
    font-size: var(--tp-type-caption-size);
    line-height: var(--tp-type-caption-lh);
    font-weight: var(--tp-weight-medium);
}

.tp-select {
    min-height: var(--tp-target-min);
    max-width: 100%;
    padding-block: 0;
    padding-inline: var(--tp-space-3);
    border: var(--tp-border-control);
    border-radius: var(--tp-radius-sm);
    background: var(--tp-surface-card);
    color: var(--tp-text-primary);
    font: inherit;
}

.tp-select--compact {
    height: var(--tp-btn-height-sm);
    min-height: var(--tp-btn-height-sm);
    padding-inline: var(--tp-space-2);
    border-radius: var(--tp-radius-xs);
    font-size: var(--tp-type-caption-size);
    line-height: var(--tp-type-caption-lh);
}

.tp-select--inverse {
    color: var(--tp-text-inverse);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--tp-text-inverse) 32%, transparent);
}

.tp-select--inverse:hover {
    background: color-mix(in srgb, var(--tp-text-inverse) 6%, transparent);
}

.tp-select--inverse option {
    background: var(--tp-surface-elevated);
    color: var(--tp-text-primary);
}

.tp-link--utility {
    min-height: var(--tp-btn-height-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--tp-space-1);
    color: inherit;
    font-size: var(--tp-type-caption-size);
    line-height: var(--tp-type-caption-lh);
}

/* Utility strip and public header are shell-owned (§7.1–§8). */
.tp-utility-strip {
    padding-block-start: var(--tp-safe-top);
    background: var(--tp-surface-inverse);
    color: var(--tp-text-inverse);
    border-block-end: var(--tp-border-subtle);
    font-size: var(--tp-type-caption-size);
    line-height: var(--tp-type-caption-lh);
}

.tp-utility-strip__inner {
    min-height: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--tp-space-2) var(--tp-space-3);
    padding-block: 2px;
}

.tp-utility-strip .tp-icon {
    --tp-icon-size: 14px;
}

.tp-utility-strip .tp-language-selector__trigger {
    min-height: 24px;
    padding-block: 2px;
}

.tp-utility-strip__language {
    flex: 0 0 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--tp-space-2);
}

.tp-utility-strip__links {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tp-space-3);
}

.tp-utility-strip__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tp-space-2) var(--tp-space-4);
}

.tp-utility-strip__link {
    max-width: 100%;
}

.tp-utility-strip .tp-link--utility {
    color: var(--tp-text-inverse);
    min-height: 24px;
}

.tp-utility-strip .tp-link--utility:hover,
.tp-utility-strip .tp-link--utility:focus-visible {
    color: var(--tp-text-on-action);
}

.tp-utility-strip__link[href^="mailto:"] {
    flex: 0 0 auto;
    min-width: max-content;
}

.tp-utility-strip__link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-language-selector__label {
    min-height: var(--tp-btn-height-sm);
    color: var(--tp-text-inverse);
    opacity: 0.86;
}

.tp-language-selector {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tp-language-selector__trigger {
    min-height: var(--tp-btn-height-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--tp-space-1);
    padding-inline: var(--tp-space-2);
    border: 1px solid color-mix(in srgb, var(--tp-text-inverse) 28%, transparent);
    border-radius: var(--tp-radius-xs);
    background: transparent;
    color: var(--tp-text-inverse);
    font: inherit;
    font-size: var(--tp-type-caption-size);
    line-height: var(--tp-type-caption-lh);
    cursor: pointer;
}

.tp-language-selector__trigger:hover,
.tp-language-selector__trigger[aria-expanded="true"] {
    background: color-mix(in srgb, var(--tp-text-inverse) 8%, transparent);
    border-color: color-mix(in srgb, var(--tp-text-inverse) 48%, transparent);
}

.tp-language-selector__chevron {
    transition: transform var(--tp-motion-fast) var(--tp-ease);
}

.tp-language-selector__trigger[aria-expanded="true"] .tp-language-selector__chevron {
    transform: rotate(180deg);
}

.tp-language-selector__menu {
    position: absolute;
    inset-block-start: calc(100% + var(--tp-space-1));
    inset-inline-start: 0;
    min-width: max(100%, 9rem);
}

.tp-language-selector__item {
    min-height: var(--tp-btn-height-sm);
    font-size: var(--tp-type-caption-size);
    line-height: var(--tp-type-caption-lh);
}

.tp-language-selector__item.is-active {
    background: var(--tp-surface-accent-quiet);
    color: var(--tp-text-primary);
    font-weight: var(--tp-weight-bold);
}

.tp-language-selector__item.is-disabled {
    opacity: 0.46;
    cursor: not-allowed;
}

.tp-language-selector__item.is-disabled:hover {
    background: transparent;
}

.tp-header {
    background: var(--tp-surface-card);
    border-block-end: var(--tp-border-subtle);
}

/* The utility strip is now the first painted region and owns the top safe
   inset. Neutralize the legacy site-header inset from site.css. */
.site-header.tp-header {
    padding-block-start: 0;
}

.tp-header__nav {
    min-height: calc(var(--tp-control-height) + var(--tp-space-4));
    margin: 0;
    padding: 0;
    background: var(--tp-surface-card);
    border: 0;
}

.tp-header__inner {
    min-height: inherit;
    display: flex;
    align-items: center;
    gap: var(--tp-space-4);
}

.tp-header__navigation {
    order: 2;
}

.tp-header__actions {
    order: 3;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--tp-space-2);
}

.tp-header__utility-action {
    min-height: var(--tp-target-min);
    display: inline-flex;
    align-items: center;
    padding-inline: var(--tp-space-3);
    border: var(--tp-border-control);
    border-radius: var(--tp-radius-pill);
    color: var(--tp-text-primary);
    font-size: var(--tp-type-label-size);
    line-height: var(--tp-type-label-lh);
    font-weight: var(--tp-weight-bold);
    text-decoration: none;
}

.tp-header__utility-action:hover,
.tp-header__utility-action:focus-visible {
    background: var(--tp-surface-accent-quiet);
    color: var(--tp-text-primary);
}

.tp-page-intro {
    padding-block: var(--tp-space-4);
    background: var(--tp-surface-page);
    border-block-end: var(--tp-border-subtle);
}

.tp-header .tp-brand {
    min-width: 0;
    min-height: var(--tp-target-min);
    display: inline-flex;
    align-items: center;
    gap: var(--tp-space-3);
    margin: 0;
    color: var(--tp-text-primary);
    text-decoration: none;
}

.tp-header .tp-brand__mark {
    width: var(--tp-target-min);
    height: var(--tp-target-min);
    border-radius: var(--tp-radius-circle);
    flex: 0 0 auto;
}

.tp-header .tp-brand__title {
    min-width: 0;
    font-family: var(--tp-font-display);
    font-size: var(--tp-type-h3-size);
    line-height: var(--tp-type-h3-lh);
    font-weight: var(--tp-weight-bold);
    white-space: normal;
}

.tp-header .navbar-nav {
    margin-inline-start: auto;
    gap: var(--tp-space-1);
}

.tp-header .navbar .nav-link {
    min-height: var(--tp-target-min);
    padding-inline: var(--tp-space-3);
    border-radius: var(--tp-radius-pill);
    color: var(--tp-text-primary) !important;
    font-size: var(--tp-type-label-size);
    line-height: var(--tp-type-label-lh);
    font-weight: var(--tp-weight-bold);
}

.tp-header .navbar .nav-link:hover,
.tp-header .navbar .nav-link:focus-visible {
    background: var(--tp-surface-accent-quiet);
    color: var(--tp-text-primary) !important;
}

.tp-header .navbar-toggler {
    min-width: var(--tp-target-min);
    min-height: var(--tp-target-min);
    padding: var(--tp-space-2);
    border: var(--tp-border-control);
    border-radius: var(--tp-radius-sm);
    color: var(--tp-text-primary);
}

.tp-header .dropdown-menu {
    background: var(--tp-surface-elevated);
    border: var(--tp-border-subtle);
    border-radius: var(--tp-radius-sm);
    box-shadow: var(--tp-elevation-1);
}

.tp-header .dropdown-item {
    min-height: var(--tp-target-min);
    display: flex;
    align-items: center;
    color: var(--tp-text-primary);
}

.tp-header .dropdown-item:hover,
.tp-header .dropdown-item:focus {
    background: var(--tp-surface-accent-quiet);
    color: var(--tp-text-primary);
}

@media (max-width: 991.98px) {
    .tp-header__navigation {
        order: 3;
        flex-basis: 100%;
        border-block-start: var(--tp-border-subtle);
        padding-block: var(--tp-space-2) var(--tp-space-4);
    }

    .tp-header .navbar-nav {
        margin-inline-start: 0;
    }

    .tp-header__actions {
        order: 2;
        margin-inline-start: auto;
    }
}

@media (min-width: 768px) {
    .tp-header__nav {
        min-height: calc(var(--tp-control-height) + var(--tp-space-5));
    }

    .tp-page-intro {
        padding-block: var(--tp-space-5);
    }
}

@media (max-width: 479.98px) {
    .tp-utility-strip__inner {
        padding-block: 2px;
        align-items: center;
        flex-wrap: nowrap;
    }

    .tp-utility-strip__language {
        width: auto;
        flex: 0 0 auto;
    }

    .tp-utility-strip__links {
        width: auto;
        flex: 0 0 auto;
        justify-content: flex-end;
        gap: var(--tp-space-2);
    }

    .tp-utility-strip__link:first-child {
        min-width: 0;
        flex: 0 0 auto;
    }

    .tp-utility-strip__link[href^="mailto:"] {
        min-width: 0;
    }

    .tp-header__utility-action {
        display: none;
    }
}

.page-content,
.tp-page-content {
    display: flex;
    flex-direction: column;
    gap: var(--tp-space-4);
    min-width: 0;
}

/* ══════════════════════════════════════════════════════════════════
   GLOBAL SECTION-SPACING RULE  (§ Architecture)

   The flex gap on .page-template and .page-content is the ONE AND ONLY
   mechanism for vertical space between top-level page sections.

   Any Bootstrap margin utility (mb-3, mt-3, mb-4, mt-4 …) placed on a
   direct child of these containers is deliberately neutralised here so
   that changing --tp-space-4 in tokens.css is the single lever that
   updates ALL pages at once.

   SCOPE:
     · .page-template:not(.row) — column-stack pages (Panchang, Transits,
       Prasna, Parihara, Kundli, Muhurtam …)
     · .page-content           — inner content slot used by Panchang,
       Transits, TeluguCalendar, Muhurtam
     · :not(.row) guard keeps Bootstrap flex-row grid pages (Index,
       MatchmakingResult) untouched — their spacing comes from Bootstrap
       g-3 padding gutters, not margins.

   WHY !important: Bootstrap utility classes share the same specificity as
   component selectors. !important is permitted here per AGENTS.md §7.6
   ("unless overriding a Bootstrap rule that cannot be targeted with
   higher specificity") — this is exactly that case.
   ══════════════════════════════════════════════════════════════════ */
.page-template:not(.row) > *,
.tp-page-template:not(.row) > *,
.page-content > *,
.tp-page-content > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* Bootstrap .row.g-* applies margin-top: -Xrem (negative compensating margin)
   to itself AND padding-top: Xrem/2 to its col-* children. Our margin-block
   reset above zeroes the negative row margin, leaving the column top-padding
   to stack onto the flex gap. Fix: zero the vertical gutter token on any
   Bootstrap row that is a direct child of a page container so only the flex
   gap governs the space above/below it. Horizontal gutters are unaffected. */
.page-template:not(.row) > .row,
.page-content > .row,
.tp-page-content > .row {
    --bs-gutter-y: 0;
}

.page-template :where(h1, h2, h3, p, fieldset, legend),
.tp-page-template :where(h1, h2, h3, p, fieldset, legend) {
    margin-block-start: 0;
}

/* ── Shared semantic heading roles (§4 typography hierarchy) ───────────────
   Use ROLE classes, not Bootstrap h-classes. Only page-level headings get
   display serif; all others stay body-sans to preserve reading density.
   ─────────────────────────────────────────────────────────────────────── */
.tp-heading-page {
    font-family: var(--tp-font-display);
    font-size: var(--tp-type-h1-size);
    line-height: var(--tp-type-h1-lh);
    font-weight: var(--tp-weight-bold);
    color: var(--tp-text-primary);
    margin: 0;
}

.tp-heading-section {
    font-size: var(--tp-type-h2-size);
    line-height: var(--tp-type-h2-lh);
    font-weight: var(--tp-weight-semibold);
    color: var(--tp-text-primary);
    margin: 0;
}

.tp-heading-card {
    font-size: var(--tp-type-h3-size);
    line-height: var(--tp-type-h3-lh);
    font-weight: var(--tp-weight-bold);
    color: var(--tp-text-primary);
    margin: 0;
}

/* Form fieldset legends — display serif, reinforces grouped-field semantics. */
.tp-heading-fieldset {
    font-family: var(--tp-font-display);
    font-size: var(--tp-type-h3-size);
    line-height: var(--tp-type-h3-lh);
    font-weight: var(--tp-weight-semibold);
    color: var(--tp-text-primary);
    margin: 0;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--tp-space-4) var(--tp-space-5);
    margin-block-end: var(--tp-space-header-content);
    min-width: 0;
}

.page-header--surface {
    align-items: center;
}

.tp-filter-card {
    display: grid;
    grid-template-columns:
        minmax(var(--tp-filter-primary-min), 0.65fr)
        minmax(var(--tp-filter-actions-min), 1.35fr);
    align-items: center;
    gap: var(--tp-space-row) var(--tp-space-section);
    width: 100%;
    min-width: 0;
    margin-block-end: var(--tp-space-header-content);
    padding: var(--tp-space-card-content);
    border-radius: var(--tp-radius-lg);
}

.tp-filter-card__primary,
.tp-filter-card__filters {
    min-width: 0;
}

.tp-filter-card__primary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tp-space-title-description);
}

.tp-filter-card__title-row {
    display: flex;
    align-items: center;
    gap: var(--tp-space-3);
    min-width: 0;
}

.tp-filter-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    line-height: 1;
}

.tp-filter-card__filters {
    justify-self: end;
    width: 100%;
}

.tp-filter-card :where(.tp-btn, .tp-field__input, .tp-field__select, .tp-location-chip) {
    height: var(--tp-control-height);
    min-height: var(--tp-control-height);
}

.tp-filter-card :where(.tp-btn, .tp-field__input, .tp-field__select) {
    padding-block: 0;
}

.tp-location-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--tp-space-2);
    max-width: 100%;
    padding-inline: var(--tp-space-3);
    border-radius: var(--tp-radius-pill);
    background: var(--tp-surface-sunken);
    color: var(--tp-text-secondary);
    font-size: var(--tp-type-label-size);
    line-height: var(--tp-type-label-lh);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-location-chip__icon {
    flex: none;
    line-height: 1;
}

.tp-location-chip__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1199.98px) {
    .tp-filter-card {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .tp-filter-card__filters {
        justify-self: stretch;
    }
}

@media (max-width: 767.98px) {
    .tp-filter-card {
        gap: var(--tp-space-mobile-gap);
        padding: var(--tp-space-4);
    }
}

.page-heading {
    display: flex;
    flex: 1 1 18rem;
    flex-direction: column;
    gap: var(--tp-space-title-description);
    min-width: 0;
}

.page-actions {
    display: flex;
    flex: 1 1 24rem;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--tp-space-3);
    min-width: 0;
}

@media (max-width: 767.98px) {
    .page-actions {
        flex-basis: 100%;
        justify-content: flex-start;
    }
}

.tp-page-header {
    display: flex;
    flex-direction: column;
    gap: var(--tp-space-2);
    margin-block-end: 0;
}

.tp-page-header--with-actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--tp-space-3);
}

.tp-page-header__text {
    display: flex;
    flex-direction: column;
    gap: var(--tp-space-2);
    min-width: 0;
}

.tp-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--tp-space-2);
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .tp-page-header--with-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .tp-page-header__actions {
        justify-content: flex-end;
    }
}

.page-title,
.tp-page-header__title {
    font-family: var(--tp-font-display);
    font-size: var(--tp-type-h1-size);
    line-height: var(--tp-type-h1-lh);
    font-weight: var(--tp-weight-bold);
    color: var(--tp-text-primary);
    margin: 0;
}

/* Explanatory subtitle — says WHY the task matters (§17). */
.page-description,
.tp-page-header__subtitle {
    font-size: var(--tp-type-body-size);
    line-height: var(--tp-type-body-lh);
    color: var(--tp-text-secondary);
    margin: 0;
}

.section,
.tp-section {
    display: flex;
    flex-direction: column;
    gap: var(--tp-space-3);
    margin-block-end: var(--tp-space-5);
    min-width: 0;
}

.section-header,
.tp-section-header {
    display: flex;
    align-items: center;
    gap: var(--tp-space-2);
    min-width: 0;
    margin-block-end: 0;
}

.tp-section-subtitle {
    font-size: var(--tp-type-body-size);
    line-height: var(--tp-type-body-lh);
    color: var(--tp-text-secondary);
    margin-top: calc(-1 * var(--tp-space-2));
    margin-bottom: 0;
}

.tp-label {
    font-size: var(--tp-type-label-size);
    line-height: var(--tp-type-label-lh);
    font-weight: var(--tp-weight-semibold);
    color: var(--tp-text-secondary);
}

.tp-caption {
    font-size: var(--tp-type-caption-size);
    line-height: var(--tp-type-caption-lh);
    color: var(--tp-text-secondary);
}


.tp-breadcrumb-wrapper {
    background-color: var(--tp-surface-subtle, rgba(212, 160, 23, 0.04));
    border-bottom: 1px solid var(--tp-border-subtle, rgba(0, 0, 0, 0.06));
    padding-block: 0.375rem;
    margin-block-end: 0;
}

.tp-page-intro-wrapper {
    margin-block-end: var(--tp-space-3, 0.75rem);
}

.tp-page-header__section-label {
    display: inline-block;
    font-size: var(--tp-type-caption-size, 0.8125rem);
    font-weight: var(--tp-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tp-text-brand, #996515);
    margin-block-end: var(--tp-space-1, 0.25rem);
}

.tp-breadcrumb {
    font-size: var(--tp-type-caption-size);
    line-height: var(--tp-type-caption-lh);
    color: var(--tp-text-secondary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tp-space-1) var(--tp-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.tp-breadcrumb__item {
    display: inline-flex;
    align-items: center;
}

.tp-breadcrumb__item + .tp-breadcrumb__item::before {
    content: "›";
    margin-inline-end: var(--tp-space-2);
    color: var(--tp-text-secondary);
}

.tp-breadcrumb__link {
    color: var(--tp-text-secondary);
    text-decoration: none;
}

.tp-breadcrumb__link:hover {
    color: var(--tp-text-primary);
    text-decoration: underline;
}

/* current page is plain text, not a link (§8) */
.tp-breadcrumb [aria-current="page"],
.tp-breadcrumb__current {
    color: var(--tp-text-primary);
    font-weight: var(--tp-weight-medium);
}

.tp-back {
    display: inline-flex;
    align-items: center;
    gap: var(--tp-space-2);
    min-height: var(--tp-target-min);
    color: var(--tp-text-secondary);
    font-size: var(--tp-type-label-size);
    text-decoration: none;
}

.tp-back:hover { color: var(--tp-text-primary); }

.tp-section-heading {
    font-family: var(--tp-font-display);
    font-size: var(--tp-type-h2-size);
    line-height: var(--tp-type-h2-lh);
    font-weight: var(--tp-weight-semibold);
    color: var(--tp-text-primary);
}

/* ══════════════════════════════════════════════════════════════════
   2. BUTTONS  (§9)
   Anatomy: [icon] label [sublabel]. Min height 44px. Loading retains size.
   ══════════════════════════════════════════════════════════════════ */
.tp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tp-space-2);
    min-height: var(--tp-btn-height-md);
    padding: var(--tp-btn-padding-md);
    border: 1.5px solid transparent;
    border-radius: var(--tp-radius-md);
    font-family: var(--tp-font-body);
    font-size: var(--tp-btn-font-size-md);
    line-height: var(--tp-type-body-lh, 1.4);
    font-weight: var(--tp-weight-bold);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--tp-elevation-0);
    transition: background-color var(--tp-motion-fast) var(--tp-ease),
                border-color var(--tp-motion-fast) var(--tp-ease),
                color var(--tp-motion-fast) var(--tp-ease);
    /* long Telugu labels wrap rather than overflow (§18 expansion) */
    white-space: normal;
    overflow-wrap: break-word;
}

/* ── Hero / Large — dominant primary CTA for Home hero & marketing ── */
.tp-btn--hero,
.tp-btn--lg {
    min-height: var(--tp-btn-height-hero);
    padding: var(--tp-btn-padding-hero);
    font-size: var(--tp-btn-font-size-hero);
    font-weight: var(--tp-weight-bold);
}

/* The mock's CTA uses the display serif for the main label. */
.tp-btn__label { font-family: var(--tp-font-display); }

.tp-btn__sublabel {
    display: block;
    font-family: var(--tp-font-body);
    font-weight: var(--tp-weight-regular);
    font-size: var(--tp-type-caption-size);
    line-height: var(--tp-type-caption-lh);
    margin-block-start: var(--tp-space-1);
}

/* ── Primary — the single dominant action per task region ── */
.tp-btn--primary {
    background: var(--tp-action-primary-bg);
    color: var(--tp-action-primary-text);
    border-color: var(--tp-action-primary-bg);
}

.tp-btn--primary:hover {
    background: var(--tp-action-primary-hover);
    border-color: var(--tp-action-primary-hover);
    color: var(--tp-action-primary-text);
}

.tp-btn--primary:active {
    background: var(--tp-action-primary-active);
    border-color: var(--tp-action-primary-active);
}

/* ── Secondary — border-led, the Tallapatra default for non-dominant ── */
.tp-btn--secondary {
    background: var(--tp-action-secondary);
    color: var(--tp-text-primary);
    border-color: var(--tp-border-color-strong);
}

.tp-btn--secondary:hover {
    background: var(--tp-surface-sunken);
    color: var(--tp-text-primary);
}

/* ── Tertiary / text ── */
.tp-btn--tertiary {
    background: transparent;
    color: var(--tp-text-link);
    border-color: transparent;
    padding-inline: var(--tp-space-3);
}

.tp-btn--tertiary:hover {
    background: var(--tp-surface-sunken);
    color: var(--tp-action-primary-hover);
}

/* ── Destructive — explicitly named, never a bare "Yes" (§22) ── */
.tp-btn--destructive {
    background: var(--tp-action-destructive);
    color: var(--tp-text-on-action);
    border-color: var(--tp-action-destructive);
}

.tp-btn--destructive:hover {
    background: var(--tp-status-error);
    filter: brightness(0.92);
}

/* ── Icon-only — 40x40px, requires an accessible name on the element ── */
.tp-btn--icon {
    width: var(--tp-btn-icon-size);
    height: var(--tp-btn-icon-size);
    min-width: var(--tp-btn-icon-size);
    min-height: var(--tp-btn-icon-size);
    padding: var(--tp-btn-padding-icon);
    border-radius: var(--tp-radius-sm);
    justify-content: center;
}

.tp-btn--full { width: 100%; }

/* ── Compact / Small — toolbars, filters, utility actions ── */
.tp-btn--sm {
    min-height: var(--tp-btn-height-sm);
    padding: var(--tp-btn-padding-sm);
    font-size: var(--tp-btn-font-size-sm);
    line-height: var(--tp-type-caption-lh);
    font-weight: var(--tp-weight-bold);
}

/* ── Disabled: reduced emphasis but STILL LEGIBLE (§10) ── */
.tp-btn:disabled,
.tp-btn[aria-disabled="true"] {
    background: var(--tp-action-disabled-bg);
    color: var(--tp-text-disabled);
    border-color: var(--tp-border-color-subtle);
    cursor: not-allowed;
}

/* ── Loading: keeps dimensions, blocks duplicate activation (§10) ── */
.tp-btn[aria-busy="true"] {
    cursor: progress;
    pointer-events: none;
}

.tp-btn[aria-busy="true"] .tp-btn__label { opacity: 0.55; }

.tp-btn[aria-busy="true"]::before {
    content: "";
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: var(--tp-radius-pill);
    animation: tp-spin 700ms linear infinite;
    flex: none;
}

@keyframes tp-spin { to { transform: rotate(360deg); } }

/* Reduced motion: a static ring still signals busy; aria-busy carries meaning. */
@media (prefers-reduced-motion: reduce) {
    .tp-btn[aria-busy="true"]::before { animation: none; opacity: 0.6; }
}

.tp-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tp-space-3);
}

.inline-controls,
.tp-control-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--tp-space-3);
    min-width: 0;
}

.inline-controls > *,
.tp-control-bar > * {
    min-width: 0;
}

.inline-controls .tp-field,
.tp-control-bar .tp-field {
    flex: 1 1 12rem;
}

.inline-controls .tp-field--compact,
.tp-control-bar .tp-field--compact {
    flex-basis: 9rem;
    flex-grow: 0;
}

.inline-controls .tp-field--wide,
.tp-control-bar .tp-field--wide {
    flex-basis: 18rem;
    flex-grow: 2;
}

.inline-controls .tp-btn,
.tp-control-bar .tp-btn {
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .inline-controls,
    .tp-control-bar,
    .inline-controls .tp-btn,
    .tp-control-bar .tp-btn {
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════════════
   3. FORM FIELDS  (§19)
   Persistent visible labels; placeholder never replaces a label.
   ══════════════════════════════════════════════════════════════════ */
.tp-field {
    display: flex;
    flex-direction: column;
    gap: var(--tp-space-1);
    min-width: 0;
    /* NOTE: container-type was removed from .tp-field — it caused a Chrome
       rendering bug where the first flex child could collapse to zero height
       when the field is inside a flex/grid stack (e.g. tp-partner-birth-group).
       The @container query for tp-datetime-grid now uses a media-query fallback
       instead (see .tp-datetime-grid below). */
}

.tp-field__label {
    font-size: var(--tp-type-label-size);
    line-height: var(--tp-type-label-lh);
    font-weight: var(--tp-weight-bold);
    color: var(--tp-text-secondary);
}

/* Required/optional exposed visually AND semantically (markup adds the
   accessible text; this only styles the visual marker). */
.tp-field__required {
    color: var(--tp-action-primary);
    margin-inline-start: var(--tp-space-1);
}

.tp-field__optional {
    color: var(--tp-text-secondary);
    font-weight: var(--tp-weight-regular);
    margin-inline-start: var(--tp-space-1);
}

.tp-field__input,
.tp-field__select,
.tp-field__textarea {
    width: 100%;
    min-height: var(--tp-target-min);
    padding: var(--tp-space-3);
    background: var(--tp-surface-card);
    color: var(--tp-text-primary);
    border: var(--tp-border-control);
    border-radius: var(--tp-radius-sm);
    font-family: var(--tp-font-body);
    font-size: var(--tp-type-body-lg-size);
    line-height: var(--tp-type-body-lg-lh);
    /* iOS zooms in on focus below 16px; body-lg is 16px at desktop and the
       min-height keeps the target correct on mobile. */
    transition: border-color var(--tp-motion-fast) var(--tp-ease);
}

.tp-field__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: var(--tp-target-min);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c4323' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--tp-space-3) center;
    padding-top: 0;
    padding-bottom: 0;
    padding-inline-end: var(--tp-space-7);
    color-scheme: light;
    accent-color: var(--tp-action-primary);
}

.tp-field__select option,
.tp-select option,
select option {
    background-color: var(--tp-surface-card);
    color: var(--tp-text-primary);
    padding: var(--tp-space-2) var(--tp-space-3);
}

.tp-field__select option:checked,
.tp-field__select option:hover,
.tp-select option:checked,
select option:checked {
    background-color: var(--tp-surface-sunken);
    color: var(--tp-action-primary);
}


.tp-field__textarea {
    min-height: calc(var(--tp-target-min) * 2.5);
    resize: vertical;
}

/* ── Custom Branded Select Dropdown Component ─────────────────── */
.tp-custom-select-wrap {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
}

/* Native select stays visible until custom dropdown is ready (Progressive Enhancement) */
.tp-custom-select-wrap select {
    display: block;
    width: 100%;
}

.tp-custom-select-wrap.tp-custom-select--ready select {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* Trigger button hidden until custom dropdown is ready */
.tp-custom-select__trigger {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--tp-target-min);
    min-height: var(--tp-target-min);
    padding: 0 var(--tp-space-3);
    background: var(--tp-surface-card);
    color: var(--tp-text-primary);
    border: var(--tp-border-control);
    border-radius: var(--tp-radius-sm);
    font-family: var(--tp-font-body);
    font-size: var(--tp-type-body-lg-size);
    line-height: var(--tp-type-body-lg-lh);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--tp-motion-fast) var(--tp-ease);
    min-width: 0;
}

.tp-custom-select-wrap.tp-custom-select--ready .tp-custom-select__trigger {
    display: flex;
}

.tp-custom-select__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-custom-select__trigger:hover {
    border-color: var(--tp-border-color-focus);
}

.tp-custom-select__trigger:focus-visible,
.tp-custom-select-wrap.is-open .tp-custom-select__trigger {
    outline: none;
    border-color: var(--tp-border-color-focus);
    box-shadow: 0 0 0 1px var(--tp-border-color-focus);
}

.tp-custom-select__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    margin-inline-start: var(--tp-space-2);
    flex-shrink: 0;
    color: var(--tp-text-primary);
    transition: transform 0.2s ease;
}

.tp-custom-select__arrow svg {
    width: 12px;
    height: 12px;
    display: block;
}

.tp-custom-select-wrap.is-open .tp-custom-select__arrow {
    transform: rotate(180deg);
}

.tp-custom-select__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 260px;
    overflow-y: auto;
    background: var(--tp-surface-card);
    border: var(--tp-border-control);
    border-radius: var(--tp-radius-md);
    box-shadow: 0 8px 24px rgba(58, 43, 22, 0.15);
    padding: var(--tp-space-1);
    display: none;
}

.tp-custom-select-wrap.is-open .tp-custom-select__menu {
    display: block;
}

.tp-custom-select__option {
    padding: var(--tp-space-2) var(--tp-space-3);
    border-radius: var(--tp-radius-xs);
    color: var(--tp-text-primary);
    font-size: var(--tp-type-body-lg-size);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-custom-select__option:hover,
.tp-custom-select__option.is-focused {
    background-color: var(--tp-surface-sunken);
    color: var(--tp-text-primary);
}

.tp-custom-select__option.is-selected {
    background-color: var(--tp-surface-sunken);
    color: var(--tp-action-primary);
    font-weight: var(--tp-weight-semibold);
}



.tp-field__input::placeholder,
.tp-field__textarea::placeholder {
    color: var(--tp-text-secondary);
    opacity: 1;
}

.tp-field__input:hover,
.tp-field__select:hover,
.tp-field__textarea:hover {
    border-color: var(--tp-border-color-focus);
}

.tp-field__input:focus,
.tp-field__select:focus,
.tp-field__textarea:focus {
    outline: none;
    border-color: var(--tp-border-color-focus);
    box-shadow: 0 0 0 1px var(--tp-border-color-focus);
}

/* Error: border + message association. Colour is never the only cue — the
   markup pairs this with an icon and text (§10, §16). */
.tp-field--error .tp-field__input,
.tp-field--error .tp-field__select,
.tp-field--error .tp-field__textarea,
.tp-field__input[aria-invalid="true"],
.tp-field__select[aria-invalid="true"],
.tp-field__textarea[aria-invalid="true"],
.tp-field__input.input-validation-error,
.tp-field__select.input-validation-error,
.tp-field__textarea.input-validation-error {
    border-color: var(--tp-border-color-error);
    border-width: 2px;
}

.tp-field__input:disabled,
.tp-field__select:disabled,
.tp-field__textarea:disabled {
    background: var(--tp-action-disabled-bg);
    color: var(--tp-text-disabled);
    cursor: not-allowed;
}

/* Read-only looks like CONTENT, not like a disabled input (§10). */
.tp-field__input[readonly] {
    background: transparent;
    border-color: transparent;
    border-block-end: var(--tp-border-subtle);
    border-radius: 0;
    padding-inline: 0;
    color: var(--tp-text-primary);
}

.tp-field__help {
    font-size: var(--tp-type-caption-size);
    line-height: var(--tp-type-caption-lh);
    color: var(--tp-text-secondary);
}

.tp-field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--tp-space-1);
    font-size: var(--tp-type-caption-size);
    line-height: var(--tp-type-caption-lh);
    font-weight: var(--tp-weight-bold);
    color: var(--tp-status-error);
}

/* Never truncate an error (§4). */
.tp-field__error { overflow: visible; white-space: normal; }

/* ── fieldset-in-grid wrapper (§19, Tallapatra v0.3) ────────────────────
   RULE: Never place <fieldset> as a direct child of form-grid--halves.
   <fieldset> ignores min-height:0 in Chrome/Edge when used as a grid/flex
   item — its children get clipped when the column is stretched to match the
   opposite column's height.

   Pattern to use instead:
     <div class="tp-partner-group">       ← plain div is the grid cell
       <fieldset class="tp-fieldset ..."> ← fieldset is just a block inside
       </fieldset>
     </div>

   Primary protection: align-items:start on form-grid--halves (no stretch).
   This wrapper is a secondary safety layer and documents the constraint.
   ─────────────────────────────────────────────────────────────────────── */
.tp-partner-group {
    min-width: 0;
}

.tp-partner-birth-group {
    /* Birth-details sub-group: plain div replacing the nested <fieldset>
       that had the same min-height clipping bug as a flex child. */
    min-width: 0;
}


.tp-fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.tp-fieldset__legend {
    font-family: var(--tp-font-display);
    font-size: var(--tp-type-h3-size);
    line-height: var(--tp-type-h3-lh);
    font-weight: var(--tp-weight-semibold);
    color: var(--tp-text-primary);
    padding: 0;
    margin-block-end: var(--tp-space-3);
}

.tp-fieldset.tp-stack > .tp-fieldset__legend {
    margin-block-end: 0;
}

/* Two columns only for tightly related SHORT fields; place stays full width. */
.tp-field-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--tp-space-4);
    min-width: 0;
}

.tp-field-row > * {
    min-width: 0;
}

@media (min-width: 768px) {
    .tp-field-row--pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--tp-space-5);
    }
}

/* Compound date/time inputs — day/month/year and hour/minute/meridiem.
   Each select keeps its own accessible name; the group is named by a legend.
   The row remains compact until the COMPONENT (not merely the viewport) is
   too narrow to keep every value legible. */
.tp-datetime-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tp-space-2);
    min-width: 0;
}

.tp-datetime-grid > * {
    min-width: 0;
}

.field-group,
.tp-field-group {
    display: flex;
    flex-direction: column;
    gap: var(--tp-space-3);
    min-width: 0;
}

.form-grid,
.tp-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tp-space-5);
    min-width: 0;
}

.form-grid > *,
.tp-form-grid > * {
    min-width: 0;
}

@media (min-width: 900px) {
    .form-grid--halves,
    .tp-form-grid--halves {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* align-items: start — CRITICAL: prevents the grid from stretching both columns
           to the same height. Without this, when one partner's data makes its column
           taller than the other, the shorter column's fieldset is forced to stretch
           via grid alignment. Because <fieldset> cannot honour min-height:0 as a
           grid item in Chrome/Edge, its flex children get clipped (e.g. the
           Date-of-Birth row disappears when a saved profile is applied).
           With start, each column is only as tall as its content → no clipping. */
        align-items: start;
    }
}

/* Replaced @container (max-width:16rem) with @media (max-width:480px):
   container-type was removed from .tp-field (it caused Chrome to zero-height
   the first flex child in stacked form layouts). This @media achieves the
   same visual stacking on narrow viewports. */
@media (max-width: 480px) {
    .tp-datetime-grid {
        grid-template-columns: 1fr;
        gap: var(--tp-space-2);
    }
}

.tp-field select,
.tp-field .tp-custom-select-wrap {
    width: 100%;
}

.tp-profile-select {
    width: 100%;
}

/* ASP.NET always renders these containers, empty when the form is valid.
   Without this an empty error box would sit on the page. */
.tp-field__error:empty,
.tp-validation-summary:empty,
.tp-validation-summary.validation-summary-valid {
    display: none;
}

/* Validation summary for long forms (§19) */
.tp-validation-summary {
    background: var(--tp-status-error-bg);
    border: 1.5px solid var(--tp-status-error);
    border-radius: var(--tp-radius-sm);
    padding: var(--tp-space-3) var(--tp-space-4);
    color: var(--tp-text-primary);
}

.tp-validation-summary__title {
    font-weight: var(--tp-weight-bold);
    color: var(--tp-status-error);
    margin: 0 0 var(--tp-space-2);
    font-size: var(--tp-type-body-size);
}

.tp-validation-summary ul { margin: 0; padding-inline-start: var(--tp-space-5); }
.tp-validation-summary li { font-size: var(--tp-type-body-size); line-height: var(--tp-type-body-lh); }

/* ══════════════════════════════════════════════════════════════════
   4. NOTICES  (§9 privacy notice, §14 feedback)
   Status is never colour-only: each variant carries an icon slot + label.
   ══════════════════════════════════════════════════════════════════ */
.tp-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--tp-space-2);
    padding: var(--tp-space-3);
    border-radius: var(--tp-radius-sm);
    font-size: var(--tp-type-caption-size);
    line-height: var(--tp-type-caption-lh);
    color: var(--tp-text-primary);
    background: var(--tp-surface-card);
    border: var(--tp-border-subtle);
}

.tp-notice__icon { flex: none; line-height: 1.2; }
.tp-notice__body { min-width: 0; }
.tp-notice__title {
    display: block;
    font-weight: var(--tp-weight-bold);
    margin-block-end: var(--tp-space-1);
}

/* Privacy — dashed pasupu border, from the mock (§9). Content must be
   VERIFIED fact, not reassurance copy (§22 RISK). */
.tp-notice--privacy {
    background: var(--tp-surface-card);
    border: 1px dashed var(--tp-palette-pasupu);
    color: var(--tp-text-secondary);
}

.tp-notice--info    { background: var(--tp-status-info-bg);    border-color: var(--tp-status-info); }
.tp-notice--success { background: var(--tp-status-success-bg); border-color: var(--tp-status-success); }
.tp-notice--warning { background: var(--tp-status-warning-bg); border-color: var(--tp-status-warning); }
.tp-notice--error   { background: var(--tp-status-error-bg);   border-color: var(--tp-status-error); }
.tp-notice--offline { background: var(--tp-status-offline-bg); border-color: var(--tp-status-offline); }
.tp-notice--pending { background: var(--tp-status-pending-bg); border-color: var(--tp-status-pending); }

.tp-notice--info .tp-notice__title    { color: var(--tp-status-info); }
.tp-notice--success .tp-notice__title { color: var(--tp-status-success); }
.tp-notice--warning .tp-notice__title { color: var(--tp-status-warning); }
.tp-notice--error .tp-notice__title   { color: var(--tp-status-error); }
.tp-notice--offline .tp-notice__title { color: var(--tp-status-offline); }
.tp-notice--pending .tp-notice__title { color: var(--tp-status-pending); }

/* ══════════════════════════════════════════════════════════════════
   5. TABS + SEGMENTED PILLS  (§8)
   Use with role="tablist"/"tab"/"tabpanel" and arrow-key handling.
   ══════════════════════════════════════════════════════════════════ */
.tp-tabs {
    display: flex;
    gap: var(--tp-space-2);
    flex-wrap: wrap;
}

/* Horizontal scroll only when wrapping is not acceptable (§6).
   scroll-snap + scroll-margin keep the selected tab fully in view rather than
   clipped at the edge when it is activated by keyboard or by a deep link. */
.tp-tabs--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    padding-block-end: var(--tp-space-1);
    min-width: 0; /* allow shrink inside flex row so sibling buttons stay on same line */
}

.tp-tabs--scroll > * {
    scroll-margin-inline: var(--tp-space-4);
}

@media (prefers-reduced-motion: reduce) {
    .tp-tabs--scroll { scroll-behavior: auto; }
}

.tp-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tp-target-min);
    padding: var(--tp-space-2) var(--tp-space-4);
    border: var(--tp-border-control);
    border-radius: var(--tp-radius-pill);
    background: transparent;
    color: var(--tp-text-secondary);
    font-size: var(--tp-type-label-size);
    line-height: var(--tp-type-label-lh);
    font-weight: var(--tp-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--tp-motion-fast) var(--tp-ease),
                color var(--tp-motion-fast) var(--tp-ease);
}

.tp-tab:hover { background: var(--tp-surface-sunken); color: var(--tp-text-primary); }

/* Selected chart tab: ink fill + leaf text (SOURCE). Selection is carried by
   fill AND weight AND border — not colour alone (§10). */
.tp-tab[aria-selected="true"] {
    background: var(--tp-surface-inverse);
    color: var(--tp-text-inverse);
    border-color: var(--tp-border-color-strong);
    font-weight: var(--tp-weight-bold);
}

.tp-tab:disabled,
.tp-tab[aria-disabled="true"] {
    color: var(--tp-text-disabled);
    border-color: var(--tp-border-color-subtle);
    cursor: not-allowed;
}

/* Report category pills: selected uses pasupu fill + ink text (SOURCE). */
.tp-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tp-target-min);
    padding: var(--tp-space-2) var(--tp-space-3);
    border: var(--tp-border-subtle);
    border-radius: var(--tp-radius-pill);
    background: transparent;
    color: var(--tp-text-secondary);
    font-size: var(--tp-type-label-size);
    line-height: var(--tp-type-label-lh);
    cursor: pointer;
}

.tp-pill:hover { background: var(--tp-surface-sunken); color: var(--tp-text-primary); }

.tp-pill[aria-selected="true"] {
    background: var(--tp-palette-pasupu);
    border-color: var(--tp-palette-pasupu);
    color: var(--tp-text-on-accent);
    font-weight: var(--tp-weight-bold);
}

.tp-tabpanel:focus-visible { outline-offset: var(--tp-focus-ring-offset); }

/* Vertical rhythm between the tab bar and whatever it controls — previously
   undefined, so the gap was whatever a tabpanel's first child happened to
   contribute (often near-zero). The padding must sit on .tp-tabpanel
   (the individual panel), not .tp-tabpanels (their shared container):
   Bootstrap's .row.g-* sets a negative top margin, and margin collapsing
   reaches straight through .tp-tabpanel (it has no border/padding of its
   own) to cancel a gap defined any higher up the tree. Padding on the
   panel itself is the first thing in the chain that can actually block it. */
.tp-tabpanel {
    padding-block-start: var(--tp-space-header-content);
}

/* ══════════════════════════════════════════════════════════════════
   6. CHIPS + BADGES
   ══════════════════════════════════════════════════════════════════ */
.tp-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--tp-space-1);
    padding: var(--tp-space-1) var(--tp-space-2);
    border-radius: var(--tp-radius-pill);
    border: var(--tp-border-subtle);
    background: var(--tp-surface-sunken);
    color: var(--tp-text-primary);
    font-size: var(--tp-type-caption-size);
    line-height: var(--tp-type-caption-lh);
    font-weight: var(--tp-weight-medium);
}

.tp-badge--success { background: var(--tp-status-success-bg); border-color: var(--tp-status-success); color: var(--tp-status-success); }
.tp-badge--warning { background: var(--tp-status-warning-bg); border-color: var(--tp-status-warning); color: var(--tp-status-warning); }
.tp-badge--error   { background: var(--tp-status-error-bg);   border-color: var(--tp-status-error);   color: var(--tp-status-error); }
.tp-badge--info    { background: var(--tp-status-info-bg);    border-color: var(--tp-status-info);    color: var(--tp-status-info); }
.tp-badge--pending { background: var(--tp-status-pending-bg); border-color: var(--tp-status-pending); color: var(--tp-status-pending); }

/* ══════════════════════════════════════════════════════════════════
   7. CARDS  (§9)
   Flat and border-led. Never combine border + shadow + texture + saturated
   colour on one ordinary card (§11).
   ══════════════════════════════════════════════════════════════════ */
.surface-card,
.tp-card {
    background: var(--tp-surface-card);
    border: var(--tp-border-subtle);
    border-radius: var(--tp-radius-lg);
    padding: var(--tp-space-4);
    box-shadow: var(--tp-elevation-0);
    min-width: 0;
}

/* Canonical card family. Page-specific classes may control internal layout,
   but surface, border, radius and padding always come from tp-card. */
.tp-card--subtle {
    background: var(--tp-surface-accent-quiet);
}

.tp-card--success {
    background: var(--tp-status-success-bg);
    border-color: var(--tp-status-success);
}

.tp-card--warning {
    background: var(--tp-status-warning-bg);
    border-color: var(--tp-status-warning);
}

.tp-card--danger {
    background: var(--tp-status-error-bg);
    border-color: var(--tp-status-error);
}

.tp-card--flush {
    padding: 0;
    overflow: hidden;
}

/* Shared tabs/actions row used by result cards. */
.tp-card-toolbar {
    display: flex;
    align-items: center;
    gap: var(--tp-space-2);
    margin-block-end: var(--tp-space-3);
    min-width: 0;
}

.tp-card-toolbar > .tp-tabs {
    flex: 1 1 auto;
    min-width: 0;
}

.tp-card-toolbar__actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

@media (max-width: 767.98px) {
    .tp-card-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .tp-card-toolbar__actions {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }
}

@media (min-width: 768px) {
    .surface-card,
    .tp-card {
        padding: var(--tp-space-4);
    }
}

.tp-card__title {
    font-family: var(--tp-font-display);
    font-size: var(--tp-type-h3-size);
    line-height: var(--tp-type-h3-lh);
    font-weight: var(--tp-weight-semibold);
    color: var(--tp-text-primary);
    margin: 0;
}

.tp-card__body {
    font-size: var(--tp-type-body-size);
    line-height: var(--tp-type-body-lh);
    color: var(--tp-text-secondary);
    margin-block-start: var(--tp-space-2);
}

/* Metadata card — definition-list semantics, wraps gracefully in Telugu. */
.tp-meta {
    background: var(--tp-surface-card);
    border: var(--tp-border-subtle);
    border-radius: var(--tp-radius-sm);
    padding: var(--tp-space-3);
    font-size: var(--tp-type-body-size);
    line-height: var(--tp-type-body-lh);
    color: var(--tp-text-secondary);
}

.tp-meta__list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--tp-space-1) var(--tp-space-3);
    margin: 0;
}

.tp-meta__list dt { font-weight: var(--tp-weight-bold); color: var(--tp-text-primary); }
.tp-meta__list dd { margin: 0; overflow-wrap: break-word; }

/* Dasha callout — pasupu leading border (SOURCE). Informational, NOT a
   warning, unless status semantics genuinely apply (§9). */
.tp-dasha {
    border-inline-start: 4px solid var(--tp-palette-pasupu);
    background: var(--tp-surface-card);
    border-radius: 0 var(--tp-radius-sm) var(--tp-radius-sm) 0;
    padding: var(--tp-space-3);
}

.tp-dasha__title {
    font-family: var(--tp-font-display);
    font-size: var(--tp-type-h3-size);
    line-height: var(--tp-type-h3-lh);
    font-weight: var(--tp-weight-semibold);
    color: var(--tp-text-primary);
    margin: 0;
}

.tp-dasha__meta {
    display: block;
    font-size: var(--tp-type-caption-size);
    line-height: var(--tp-type-caption-lh);
    color: var(--tp-text-secondary);
    margin-block-start: var(--tp-space-1);
}

/* ══════════════════════════════════════════════════════════════════
   8. RESULT CARD + SUTRA THREAD  (§11.1 — the signature pattern)
   Conclusion visible BEFORE expansion. Each card owns its disclosure state.
   Thread structure is semantic (<ol>), not decorative.
   ══════════════════════════════════════════════════════════════════ */
.tp-result {
    background: var(--tp-surface-card);
    border: var(--tp-border-subtle);
    border-radius: var(--tp-radius-md);
    padding: var(--tp-space-4);
}

.tp-result__title {
    font-family: var(--tp-font-display);
    font-size: var(--tp-type-h3-size);
    line-height: var(--tp-type-h3-lh);
    font-weight: var(--tp-weight-semibold);
    color: var(--tp-text-primary);
    margin: 0;
}

.tp-result__summary {
    font-size: var(--tp-type-body-size);
    line-height: var(--tp-type-body-lh);
    color: var(--tp-text-secondary);
    margin: var(--tp-space-2) 0 0;
}

/* Disclosure trigger */
.tp-disclosure { margin-block-start: var(--tp-space-3); }

.tp-disclosure__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--tp-space-2);
    min-height: var(--tp-target-min);
    background: none;
    border: none;
    padding: 0;
    color: var(--tp-action-primary);
    font-family: var(--tp-font-body);
    font-size: var(--tp-type-label-size);
    line-height: var(--tp-type-label-lh);
    font-weight: var(--tp-weight-bold);
    cursor: pointer;
    text-align: start;
}

.tp-disclosure__trigger::before {
    content: "\2756"; /* ❖ */
    font-size: var(--tp-type-caption-size);
    flex: none;
}

.tp-disclosure__trigger[aria-expanded="true"]::before { content: "\2756"; }

.tp-disclosure__panel { margin-block-start: var(--tp-space-3); }

/* ── The thread ── */
/* The thread line and its beads must share one centre axis. Deriving both
   from --tp-thread-x keeps them locked; previously they were positioned with
   independent offsets and sat 0.75px apart, which reads as the beads floating
   off the thread. */
.tp-sutra {
    --tp-thread-w: 1.5px;
    --tp-bead-size: 9px;
    /* centre of the thread, measured from the list's inline start */
    --tp-thread-x: calc(var(--tp-space-2) + (var(--tp-thread-w) / 2));

    position: relative;
    padding-inline-start: var(--tp-space-5);
    margin: 0;
    list-style: none;
}

.tp-sutra::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--tp-thread-x) - (var(--tp-thread-w) / 2));
    inset-block: var(--tp-space-1);
    width: var(--tp-thread-w);
    background: repeating-linear-gradient(var(--tp-palette-pasupu) 0 6px,
                                          transparent 6px 11px);
}

.tp-sutra__step {
    position: relative;
    padding-block-end: var(--tp-space-3);
}

/* bead centred on the thread axis */
.tp-sutra__step::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--tp-thread-x) - (var(--tp-bead-size) / 2) - var(--tp-space-5));
    inset-block-start: var(--tp-space-1);
    width: var(--tp-bead-size);
    height: var(--tp-bead-size);
    border-radius: var(--tp-radius-pill);
    background: var(--tp-palette-pasupu);
    border: 2px solid var(--tp-surface-card);
}

.tp-sutra__label {
    display: block;
    font-size: var(--tp-type-caption-size);
    line-height: var(--tp-type-caption-lh);
    font-weight: var(--tp-weight-bold);
    letter-spacing: 0.04em;
    /* pasupu fails contrast as text on card — the step label uses the
       accessible warning ink, which reads as the same turmeric family. */
    color: var(--tp-status-warning);
}

.tp-sutra__text {
    display: block;
    font-size: var(--tp-type-body-size);
    line-height: var(--tp-type-body-lh);
    color: var(--tp-text-primary);
}

/* The conclusion box */
.tp-phala {
    background: var(--tp-surface-page);
    border: 1px solid var(--tp-palette-pasupu);
    border-radius: var(--tp-radius-sm);
    padding: var(--tp-space-3);
    font-size: var(--tp-type-body-size);
    line-height: var(--tp-type-body-lh);
    color: var(--tp-text-primary);
}

.tp-phala__label { font-weight: var(--tp-weight-bold); color: var(--tp-action-primary); }

/* ══════════════════════════════════════════════════════════════════
   9. SOUTH INDIAN CHART  (§20)
   4x4 grid, central 2x2 identity region. Square at every width.
   ══════════════════════════════════════════════════════════════════ */
.tp-chart-wrap { container-type: inline-size; }

.tp-chart {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    aspect-ratio: 1 / 1;      /* stays square, grows with container (§20) */
    gap: 1.5px;
    background: var(--tp-chart-grid);
    border: var(--tp-border-strong);
    border-radius: var(--tp-radius-xs);
    overflow: hidden;
}

.tp-chart__cell {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--tp-chart-background);
    padding: var(--tp-space-1);
    min-width: 0;
    text-align: start;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.tp-chart__cell:hover { background: var(--tp-chart-selected-bg); }

/* Selection uses fill + inset outline, never colour alone (§20). */
.tp-chart__cell[aria-selected="true"] {
    background: var(--tp-chart-selected-bg);
    box-shadow: inset 0 0 0 2px var(--tp-chart-selected-outline);
}

.tp-chart__sign {
    font-size: var(--tp-type-caption-size);
    line-height: 1.2;
    color: var(--tp-chart-label);
    font-style: normal;
}

.tp-chart__planets {
    font-family: var(--tp-font-display);
    font-size: var(--tp-type-label-size);
    line-height: 1.35;
    letter-spacing: 0.04em;
    color: var(--tp-chart-planet);
    text-align: center;
    margin-block: auto;
    /* wrap rather than shrink indefinitely at 200% zoom (§20) */
    overflow-wrap: break-word;
}

/* Status markers: distinct SYMBOL + colour, never colour alone (§20). */
.tp-chart__marker {
    font-size: var(--tp-type-caption-size);
    font-weight: var(--tp-weight-bold);
    vertical-align: super;
    line-height: 1;
}

.tp-chart__marker--exalted     { color: var(--tp-chart-marker-exalted); }
.tp-chart__marker--debilitated { color: var(--tp-chart-marker-debilitated); }
.tp-chart__marker--retrograde  { color: var(--tp-chart-marker-retrograde); }
.tp-chart__marker--combust     { color: var(--tp-chart-marker-combust); }

/* Lagna corner wedge (SOURCE) — paired with a text marker in the cell. */
.tp-chart__cell--lagna::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, var(--tp-chart-lagna) 0 50%, transparent 50%);
    pointer-events: none;
}

.tp-chart__centre {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    background: var(--tp-chart-centre);
    border: var(--tp-border-subtle);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--tp-space-1);
    padding: var(--tp-space-2);
    text-align: center;
}

.tp-chart__centre-title {
    font-family: var(--tp-font-display);
    font-size: var(--tp-type-h3-size);
    line-height: var(--tp-type-h3-lh);
    color: var(--tp-text-primary);
}

.tp-chart__centre-meta {
    font-size: var(--tp-type-caption-size);
    line-height: var(--tp-type-caption-lh);
    color: var(--tp-text-secondary);
}

/* Legend — always near the chart, explains every abbreviation (§20). */
.tp-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tp-space-2) var(--tp-space-4);
    font-size: var(--tp-type-caption-size);
    line-height: var(--tp-type-caption-lh);
    color: var(--tp-text-secondary);
}

.tp-chart-legend__item { display: inline-flex; align-items: center; gap: var(--tp-space-1); }

/* In the legend the mark is the subject, not an annotation — it keeps full
   size and sits on the baseline rather than raised. */
.tp-chart-legend .tp-chart__marker {
    font-size: inherit;
    vertical-align: baseline;
}

.tp-chart-legend .tp-chart__marker::after { content: none; }

@media print {
    /* monochrome-safe: markers keep their symbols, colour is dropped */
    .tp-chart { background: var(--tp-print-ink); }
    .tp-chart__cell { background: var(--tp-print-paper); }
    .tp-chart__marker { color: var(--tp-print-ink); }
}

/* ══════════════════════════════════════════════════════════════════
   9b. NATAL CHART — the real KundliResult chart  (§20)

   Same 4x4 South Indian geometry as .tp-chart, but carrying the full product
   data model: sign name, house number, planet group with degrees, and status
   marks that link to the graha table.

   The house/sign mapping is produced by the page's slot order and grid
   auto-placement. It is NOT adjusted here — layout must never move a house
   or sign to make styling easier (§20).
   ══════════════════════════════════════════════════════════════════ */
.tp-chart--natal {
    width: 100%;
    max-width: 450px;
    /* Floor the chart so a house holding three or more planets never clips.
       Below this the cell drops under ~68px and the planet rows overflow —
       observed at 320px + 200% zoom. Past the floor the wrapper scrolls
       (a sanctioned contained data region, §7) rather than cropping Telugu,
       which §20 forbids. */
    min-width: 288px;
    margin-inline: auto;
    /* ink shows through the gaps as the grid lines (SOURCE) */
    gap: 1.5px;
}

.tp-chart--natal .tp-chart__cell {
    border-radius: 0;
    overflow: hidden;
    justify-content: flex-start;
    padding: var(--tp-space-1);
    cursor: default;
}

/* Lagna: the SOURCE corner wedge plus a restrained ink inset. A full 2px
   kumkum outline was tried and reads as an error state on a calm leaf page;
   kumkum stays on the wedge, and the always-visible "లగ్నం" tag below is the
   colour-independent cue. */
.tp-chart--natal .tp-chart__cell--lagna {
    box-shadow: inset 0 0 0 1.5px var(--tp-border-color-strong);
}

/* ── CELL DENSITY CONTRACT ────────────────────────────────────────────
   A house can hold up to nine planets, and each planet renders a code, an
   optional status mark AND a degree. The design doc specifies cell anatomy
   (§20) but never a maximum content budget, and the source mock only ever
   showed three bare abbreviations with no degrees — so the crowded case was
   never designed. A real stellium overflowed the cell and was clipped.

   RESOLUTION: make room instead of removing information. Degrees are not
   optional detail — a reader wants them — so an earlier attempt to drop them
   from four planets up was wrong and has been reverted.

   The space came from the layout: the D1 chart was sharing a 3-up grid with
   the fifteen varga charts, so the primary artefact of the page rendered at
   the same size as a minor divisional chart (76px cells). D1 now has its own
   full-width block, giving ~112px cells, which fits code + superscript status
   mark + degree for all nine planets in two columns.

   The only density rule left is a single-column fallback for genuinely small
   cells (the varga charts, which carry codes only).
   ─────────────────────────────────────────────────────────────────────── */

/* Featured row: D1 and D9 side by side at full size on desktop, stacking on
   narrower screens. Replaces the old single-centred-D1 block, which left large
   empty margins on either side of one chart on a wide screen.
   flex-basis 380px means the two wrap to a stack below ~800px, which is where
   two 450px charts stop fitting side by side. */
.tp-chart-featured {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tp-space-5);
    margin-block-end: var(--tp-space-6);
}

.tp-chart-featured__item {
    flex: 1 1 380px;
    max-width: 450px; /* matches .tp-chart--natal's own cap */
    min-width: 0;
}

/* Raised floor, applied by the server only when some house actually holds four
   or more planets. Measured: 416px is the narrowest chart where nine planets
   with code + status mark + degree fit with zero overflow. A sparse chart keeps
   the lower 288px floor and so still fits a 320px screen without scrolling;
   a dense one scrolls inside its wrapper, which is a sanctioned contained
   data region (§7) and never scrolls the page. */
.tp-chart--dense {
    min-width: 416px;
}

.tp-chart--natal .tp-chart__cell--lagna::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, var(--tp-chart-lagna) 0 50%, transparent 50%);
    pointer-events: none;
}

.tp-chart__cell-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1px var(--tp-space-1);
    min-width: 0;
    flex-shrink: 0;
}

.tp-chart--natal .tp-chart__sign {
    font-size: var(--tp-type-caption-size);
    font-weight: var(--tp-weight-bold);
    color: var(--tp-chart-label);
    line-height: 1.15;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-chart__house {
    font-size: var(--tp-type-caption-size);
    font-weight: var(--tp-weight-semibold);
    color: var(--tp-text-secondary);
    background: var(--tp-surface-sunken);
    border-radius: var(--tp-radius-xs);
    padding-inline: var(--tp-space-1);
    line-height: 1.3;
    flex-shrink: 0;
}

/* Planet group. Density steps come from the actual planet count so glyphs
   never collide — they wrap or shrink to a floor, never below legibility. */
.tp-chart--natal .tp-chart__planets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px 2px;
    align-content: center;
    justify-content: center;
    min-height: 0;
    margin-block: auto;
}

.tp-chart__cell[data-planet-count="1"] .tp-chart__planets,
.tp-chart__cell[data-planet-count="2"] .tp-chart__planets {
    grid-template-columns: 1fr;
    place-items: center;
}

.tp-chart__cell[data-planet-count="3"] .tp-chart__planet:last-child {
    grid-column: 1 / -1;
}

.tp-chart__planet {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1px;
    min-width: 0;
    font-size: var(--tp-type-caption-size);
    line-height: 1.15;
}

.tp-chart__cell[data-planet-count="1"] .tp-chart__planet {
    font-size: var(--tp-type-label-size);
    gap: var(--tp-space-1);
}

/* Five or more planets in one house: tighten, but hold at the caption floor
   rather than shrinking Telugu indefinitely (§20). */
.tp-chart__cell[data-planet-count="5"] .tp-chart__planet,
.tp-chart__cell[data-planet-count="6"] .tp-chart__planet,
.tp-chart__cell[data-planet-count="7"] .tp-chart__planet,
.tp-chart__cell[data-planet-count="8"] .tp-chart__planet,
.tp-chart__cell[data-planet-count="9"] .tp-chart__planet {
    gap: 0;
    line-height: 1.05;
}

/* ── Anti-clip: scale glyphs to the chart's OWN width ─────────────────────
   The 4×4 grid keeps square cells (rows are 1fr of a 1:1 chart), so each cell's
   height is fixed for a given chart width. A house holding 3+ planets — each
   showing a code AND a degree — overflowed that fixed height and was cropped by
   the cell's `overflow: hidden`, most visibly on narrow charts like the Prasna
   result's side column (Cancer holding Sun+Mercury+Jupiter dropped the Sun).
   Sizing the glyphs in container-query width units (cqw) makes them shrink WITH
   the chart so every planet stays inside its cell at any screen size; the clamp
   ceiling equals the previous fixed sizes, so full-width charts are unchanged.
   `.tp-chart` becomes its own inline-size container so this works on pages that
   don't wrap it in `.tp-chart-wrap` (Prasna, Transits, Matchmaking). */
.tp-chart { container-type: inline-size; }

.tp-chart--natal .tp-chart__planet {
    font-size: clamp(7px, 3.1cqw, var(--tp-type-caption-size));
    line-height: 1.12;
}
.tp-chart--natal .tp-chart__cell[data-planet-count="1"] .tp-chart__planet,
.tp-chart--natal .tp-chart__cell[data-planet-count="2"] .tp-chart__planet {
    font-size: clamp(8px, 3.7cqw, var(--tp-type-label-size));
}
.tp-chart--natal .tp-chart__degree { font-size: 0.72em; }
.tp-chart--natal .tp-chart__sign { font-size: clamp(7px, 2.7cqw, var(--tp-type-caption-size)); }

/* .planet-code / .planet-code-lagna are still owned by site.css because four
   un-migrated pages (Index, PrasnaResult, Transits, MatchmakingResult) share
   them. Scoped overrides so the migrated chart gets the Tallapatra treatment
   without touching those pages. Unscope in Phase 5. */
.tp-chart--natal .planet-code {
    font-family: var(--tp-font-display);
    font-weight: var(--tp-weight-bold);
    font-size: var(--tp-type-label-size);
    line-height: 1.25;
    text-align: center;
    padding-inline: 1px;
    flex-shrink: 0;
    white-space: nowrap;
}

.tp-chart--natal .planet-code-lagna {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    border-radius: var(--tp-radius-pill);
    border: 1px solid var(--tp-chart-lagna);
    background: var(--tp-surface-sunken);
}

.tp-chart__degree {
    font-size: var(--tp-type-caption-size);
    color: var(--tp-text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 0;
    overflow: hidden;
}

/* Status marks: each state has its own Telugu glyph AND its own colour, so
   the meaning survives greyscale and colour-vision differences (§20). */
/* Sized in `em` so it stays a true superscript against whatever the planet
   code is set to. The mock's ratio is 8/13.5 ≈ 0.6; at a fixed caption size
   the mark came out nearly as large as the code it annotates, which read as a
   second planet rather than a dignity mark. */
.tp-chart__marker {
    position: relative;
    font-size: 0.62em;
    font-weight: var(--tp-weight-bold);
    line-height: 1;
    vertical-align: super;
    text-decoration: none;
    padding: 0;
    margin-inline-start: 1px;
    color: var(--tp-text-primary);
}

/* DOCUMENTED EXCEPTION (§16 target size).
   These are inline superscripts inside a 4x4 chart cell that can hold up to
   nine planets. A 44x44 hit area would overlap neighbouring planets and
   adjacent cells, making the chart LESS usable by touch, not more.
   Expanded to 24x24 via a pseudo-element — no layout or visual change — which
   satisfies WCAG 2.2 SC 2.5.8 (Target Size Minimum, 24x24) under its inline
   exception. The whole graha table row remains reachable by keyboard as the
   full-size alternative path to the same information. */
.tp-chart__marker::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
}

.tp-chart__marker[data-status-mark="Ucha"]   { color: var(--tp-chart-marker-exalted); }
.tp-chart__marker[data-status-mark="Neecha"] { color: var(--tp-chart-marker-debilitated); }
.tp-chart__marker[data-status-mark="Vakra"]  { color: var(--tp-chart-marker-retrograde); }

.tp-chart__marker:hover,
.tp-chart__marker:focus-visible { text-decoration: underline; }

/* Centre identity region (2x2). */
.tp-chart--natal .tp-chart__centre {
    border-radius: 0;
    padding: var(--tp-space-2);
    overflow: hidden;
}

.tp-chart--natal .tp-chart__centre-title {
    font-size: var(--tp-type-label-size);
    font-weight: var(--tp-weight-bold);
    line-height: 1.2;
}

.tp-chart--natal .tp-chart__centre-meta {
    font-size: var(--tp-type-caption-size);
    line-height: 1.3;
}

.tp-chart__centre-row {
    font-size: var(--tp-type-caption-size);
    line-height: 1.35;
    color: var(--tp-text-primary);
}

.tp-chart__centre-row--divider {
    border-block-start: var(--tp-border-subtle);
    margin-block-start: var(--tp-space-1);
    padding-block-start: var(--tp-space-1);
}

.tp-chart__centre-label {
    font-weight: var(--tp-weight-bold);
    color: var(--tp-text-secondary);
}

/* Prasna house highlighting — relevance, not status. Pasupu accent plus a
   stronger inset outline so it does not read as an error state.
   site.css sets these with !important for the un-migrated pages, so the
   migrated chart needs !important too in order to win. */
.tp-chart--natal .tp-chart__cell.highlight-primary {
    background: var(--tp-chart-selected-bg) !important;
    border-color: var(--tp-palette-pasupu) !important;
    box-shadow: inset 0 0 0 2px var(--tp-palette-pasupu);
}

.tp-chart--natal .tp-chart__cell.highlight-secondary {
    background: var(--tp-surface-page) !important;
    border-color: var(--tp-border-color-subtle) !important;
}

/* ══════════════════════════════════════════════════════════════════
   9c. DASHA LIST — drill-down periods  (§9 dasha callout)
   ══════════════════════════════════════════════════════════════════ */
.tp-dasha-list { display: flex; flex-direction: column; gap: var(--tp-space-2); }

.tp-dasha-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tp-space-3);
    min-height: var(--tp-target-min);
    padding: var(--tp-space-2) var(--tp-space-3);
    background: var(--tp-surface-card);
    border: var(--tp-border-subtle);
    border-radius: var(--tp-radius-sm);
    font-size: var(--tp-type-body-size);
    color: var(--tp-text-primary);
    text-align: start;
    width: 100%;
}

.tp-dasha-row--clickable { cursor: pointer; }
.tp-dasha-row--clickable:hover { background: var(--tp-surface-sunken); }

/* Current period: pasupu leading border + an explicit "ఇప్పుడు" tag, so the
   state is never carried by colour alone. */
.tp-dasha-row--current {
    border-inline-start: 4px solid var(--tp-palette-pasupu);
    background: var(--tp-surface-card);
}

.tp-dasha-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.tp-dasha-now {
    display: inline-flex;
    align-items: center;
    padding: var(--tp-space-1) var(--tp-space-2);
    border-radius: var(--tp-radius-pill);
    background: var(--tp-palette-pasupu);
    color: var(--tp-text-on-accent);
    font-size: var(--tp-type-caption-size);
    font-weight: var(--tp-weight-bold);
    white-space: nowrap;
}

/* .tp-chevron is defined once with the accordion below. */

/* ══════════════════════════════════════════════════════════════════
   9d. ACCORDION + CHIP ROW
   ══════════════════════════════════════════════════════════════════ */
.tp-accordion { display: flex; flex-direction: column; gap: var(--tp-space-2); }

.tp-accordion-item {
    background: var(--tp-surface-card);
    border: var(--tp-border-subtle);
    border-radius: var(--tp-radius-sm);
    overflow: hidden;
}

/* Full-width disclosure row. `all: unset` first, because a bare <button>
   otherwise inherits the UA's outset border, grey fill and the heading's
   font-size from its wrapping <h2>. */
.tp-accordion-button {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tp-space-2);
    width: 100%;
    min-height: var(--tp-target-min);
    padding: var(--tp-space-3);
    background: var(--tp-surface-card);
    color: var(--tp-text-primary);
    font-family: var(--tp-font-display);
    font-size: var(--tp-type-h3-size);
    line-height: var(--tp-type-h3-lh);
    font-weight: var(--tp-weight-semibold);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--tp-motion-fast) var(--tp-ease);
}

.tp-accordion-button:hover { background: var(--tp-surface-sunken); }

.tp-accordion-button:focus-visible {
    outline: var(--tp-focus-ring-width) solid var(--tp-focus-ring-color);
    outline-offset: calc(var(--tp-focus-ring-offset) * -1);
}

/* Open state: sunken fill + a pasupu leading edge, so the state is not
   carried by the chevron rotation alone. */
.tp-accordion-button[aria-expanded="true"] {
    background: var(--tp-surface-sunken);
    box-shadow: inset 3px 0 0 var(--tp-palette-pasupu);
}

.tp-accordion-body {
    padding: var(--tp-space-3);
    border-block-start: var(--tp-border-subtle);
    font-size: var(--tp-type-body-size);
    line-height: var(--tp-type-body-lh);
}

/* Chevron sits on the trailing edge and rotates to mirror the state. */
.tp-chevron {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tp-text-secondary);
    font-size: var(--tp-type-body-size);
    line-height: 1;
    transition: transform var(--tp-motion-fast) var(--tp-ease);
}

.tp-accordion-button[aria-expanded="true"] .tp-chevron { transform: rotate(180deg); }

.tp-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tp-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.tp-chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--tp-btn-height-sm);
    padding: var(--tp-btn-padding-sm);
    font-size: var(--tp-btn-font-size-sm);
    border: var(--tp-border-subtle);
    border-radius: var(--tp-radius-pill);
    background: transparent;
    color: var(--tp-text-secondary);
    font-size: var(--tp-type-label-size);
    cursor: pointer;
}

.tp-chip:hover { background: var(--tp-surface-sunken); color: var(--tp-text-primary); }

.tp-chip--active {
    background: var(--tp-palette-pasupu);
    border-color: var(--tp-palette-pasupu);
    color: var(--tp-text-on-accent);
    font-weight: var(--tp-weight-bold);
}

/* ══════════════════════════════════════════════════════════════════
   10. SYSTEM STATES  (§14)
   ══════════════════════════════════════════════════════════════════ */
.tp-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tp-space-3);
    text-align: center;
    padding: var(--tp-space-8) var(--tp-space-4);
    background: var(--tp-surface-card);
    border: var(--tp-border-subtle);
    border-radius: var(--tp-radius-md);
}

.tp-state__title {
    font-family: var(--tp-font-display);
    font-size: var(--tp-type-h3-size);
    line-height: var(--tp-type-h3-lh);
    font-weight: var(--tp-weight-semibold);
    color: var(--tp-text-primary);
    margin: 0;
}

/* Explains what happened AND how to recover (§14) */
.tp-state__body {
    font-size: var(--tp-type-body-size);
    line-height: var(--tp-type-body-lh);
    color: var(--tp-text-secondary);
    max-width: 46ch;
    margin: 0;
}

/* Skeleton — resembles the FINAL structure; never fake Telugu text (§14). */
.tp-skeleton {
    background: linear-gradient(90deg,
                var(--tp-surface-sunken) 25%,
                var(--tp-surface-card) 37%,
                var(--tp-surface-sunken) 63%);
    background-size: 400% 100%;
    border-radius: var(--tp-radius-xs);
    animation: tp-shimmer 1.4s ease infinite;
}

@keyframes tp-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
    .tp-skeleton { animation: none; background: var(--tp-surface-sunken); }
}

.tp-skeleton--text  { height: var(--tp-type-body-lh); margin-block-end: var(--tp-space-2); }
.tp-skeleton--title { height: var(--tp-type-h2-lh); width: 60%; margin-block-end: var(--tp-space-3); }
.tp-skeleton--block { height: var(--tp-space-10); }

/* ══════════════════════════════════════════════════════════════════
   11. OVERLAYS — dialog, sheet, menu, tooltip, toast  (§15)
   Overlay surfaces use clean card tokens, never the page fibre texture.
   ══════════════════════════════════════════════════════════════════ */
.tp-scrim {
    position: fixed;
    inset: 0;
    background: var(--tp-surface-overlay);
    z-index: var(--tp-z-modal);
}

.tp-dialog {
    position: fixed;
    z-index: var(--tp-z-modal);
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: min(calc(100vw - var(--tp-space-6)), 480px);
    max-height: calc(100vh - var(--tp-space-8));
    overflow-y: auto;
    background: var(--tp-surface-elevated);
    background-image: none;             /* no fibre on overlays (§11.3) */
    border: var(--tp-border-strong);
    border-radius: var(--tp-radius-lg);
    box-shadow: var(--tp-elevation-modal);
    padding: var(--tp-space-5);
}

.tp-dialog--form { width: min(calc(100vw - var(--tp-space-6)), 680px); }

.tp-dialog__title {
    font-family: var(--tp-font-display);
    font-size: var(--tp-type-h2-size);
    line-height: var(--tp-type-h2-lh);
    font-weight: var(--tp-weight-semibold);
    margin: 0 0 var(--tp-space-3);
    color: var(--tp-text-primary);
}

.tp-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--tp-space-3);
    margin-block-start: var(--tp-space-5);
}

/* Mobile: complex forms become a full-height sheet, simple actions a bottom
   sheet (§15). Safe areas respected. */
@media (max-width: 767px) {
    .tp-dialog--sheet {
        inset: auto 0 0 0;
        transform: none;
        width: 100%;
        max-height: 85vh;
        border-radius: var(--tp-radius-lg) var(--tp-radius-lg) 0 0;
        padding-bottom: calc(var(--tp-space-5) + var(--tp-safe-bottom));
    }

    .tp-dialog--full {
        inset: 0;
        transform: none;
        width: 100%;
        max-width: none;
        max-height: none;
        height: 100dvh;
        border-radius: 0;
    }
}

.tp-menu {
    min-width: 200px;
    background: var(--tp-surface-elevated);
    background-image: none;
    border: var(--tp-border-subtle);
    border-radius: var(--tp-radius-sm);
    box-shadow: var(--tp-elevation-1);
    padding: var(--tp-space-1);
    z-index: var(--tp-z-dropdown);
}

.tp-menu__item {
    display: flex;
    align-items: center;
    gap: var(--tp-space-2);
    width: 100%;
    min-height: var(--tp-target-min);
    padding: var(--tp-space-2) var(--tp-space-3);
    border: none;
    background: none;
    border-radius: var(--tp-radius-xs);
    color: var(--tp-text-primary);
    font-size: var(--tp-type-body-size);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.tp-menu__item:hover { background: var(--tp-surface-sunken); }

/* Destructive menu items are separated and explicitly named (§8). */
.tp-menu__separator {
    height: 1px;
    background: var(--tp-border-color-subtle);
    margin: var(--tp-space-1) 0;
}

.tp-menu__item--destructive { color: var(--tp-status-error); font-weight: var(--tp-weight-medium); }

.tp-tooltip {
    background: var(--tp-surface-inverse);
    color: var(--tp-text-inverse);
    border-radius: var(--tp-radius-xs);
    padding: var(--tp-space-1) var(--tp-space-2);
    font-size: var(--tp-type-caption-size);
    line-height: var(--tp-type-caption-lh);
    max-width: 28ch;
    z-index: var(--tp-z-tooltip);
}

.tp-toast {
    position: fixed;
    inset-inline: var(--tp-space-4);
    inset-block-end: calc(var(--tp-space-4) + var(--tp-safe-bottom));
    margin-inline: auto;
    max-width: 420px;
    background: var(--tp-surface-inverse);
    color: var(--tp-text-inverse);
    border-radius: var(--tp-radius-sm);
    padding: var(--tp-space-3) var(--tp-space-4);
    box-shadow: var(--tp-elevation-1);
    font-size: var(--tp-type-body-size);
    z-index: var(--tp-z-toast);
}

/* ══════════════════════════════════════════════════════════════════
   12. CONSULTATION CTA  (§9)
   Inverse ink surface, leaf text, pasupu arrow (SOURCE). Commercial action —
   price/availability must be disclosed before commitment.
   ══════════════════════════════════════════════════════════════════ */
.tp-consult {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tp-space-3);
    min-height: var(--tp-target-min);
    background: var(--tp-surface-inverse);
    color: var(--tp-text-inverse);
    border-radius: var(--tp-radius-md);
    padding: var(--tp-space-3) var(--tp-space-4);
    text-decoration: none;
}

.tp-consult__title {
    font-family: var(--tp-font-display);
    font-size: var(--tp-type-body-lg-size);
    line-height: var(--tp-type-body-lg-lh);
    font-weight: var(--tp-weight-semibold);
    color: var(--tp-text-inverse);
}

.tp-consult__meta {
    display: block;
    font-size: var(--tp-type-caption-size);
    line-height: var(--tp-type-caption-lh);
    color: var(--tp-text-inverse);
    opacity: 0.85;
    margin-block-start: var(--tp-space-1);
}

.tp-consult__arrow { font-style: normal; font-size: var(--tp-type-h3-size); color: var(--tp-palette-pasupu); flex: none; }

/* ══════════════════════════════════════════════════════════════════
   13. STICKY ACTION BAR  (§7, §23)
   Respects safe areas; must not cover the focused field.
   ══════════════════════════════════════════════════════════════════ */
.tp-sticky-actions {
    position: sticky;
    inset-block-end: 0;
    z-index: var(--tp-z-sticky);
    background: var(--tp-surface-page);
    border-block-start: var(--tp-border-subtle);
    padding: var(--tp-space-3) 0 calc(var(--tp-space-3) + var(--tp-safe-bottom));
    box-shadow: var(--tp-elevation-1);
}

/* ══════════════════════════════════════════════════════════════════
   14. SHELL FOOTER  (§7 page structure)
   Wraps at every width; no inline separators that cannot break.
   ══════════════════════════════════════════════════════════════════ */
.tp-footer {
    background: var(--tp-surface-inverse);
    color: var(--tp-text-inverse);
    border-block-start: var(--tp-space-1) solid var(--tp-palette-pasupu);
}

.tp-footer__inner {
    padding-block-start: var(--tp-space-4);
    padding-block-end: calc(var(--tp-space-3) + var(--tp-safe-bottom));
    display: grid;
    gap: var(--tp-space-4);
}

.tp-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tp-space-4);
}

.tp-footer__brand {
    display: grid;
    align-content: start;
    gap: var(--tp-space-3);
    max-width: var(--tp-layout-reading);
}

.tp-footer__brand-title {
    font-family: var(--tp-font-display);
    font-size: var(--tp-type-h3-size);
    line-height: var(--tp-type-h3-lh);
    font-weight: var(--tp-weight-bold);
    color: var(--tp-text-on-action);
}

.tp-footer__tagline {
    margin: 0;
    color: var(--tp-text-inverse);
    font-size: var(--tp-type-body-size);
    line-height: var(--tp-type-body-lh);
}

.tp-footer__group h2 {
    margin: 0 0 var(--tp-space-2);
    font-family: var(--tp-font-body);
    font-size: var(--tp-type-label-size);
    line-height: var(--tp-type-label-lh);
    font-weight: var(--tp-weight-bold);
    color: var(--tp-text-on-action);
}

.tp-footer__links {
    display: grid;
    gap: var(--tp-space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.tp-footer__links a {
    display: inline-flex;
    align-items: center;
    padding-block: 4px;
    font-size: var(--tp-type-caption-size);
    line-height: 1.4;
    color: var(--tp-text-inverse);
    text-decoration: none;
    transition: color var(--tp-motion-fast) var(--tp-ease);
}

.tp-footer__links a:hover {
    color: var(--tp-text-on-action);
    text-decoration: underline;
}

.tp-footer__bottom {
    padding-block-start: var(--tp-space-4);
    border-block-start: var(--tp-border-subtle);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--tp-space-3);
    color: var(--tp-text-inverse);
    font-size: var(--tp-type-caption-size);
    line-height: var(--tp-type-caption-lh);
}

.tp-global-feedback-layer:empty {
    display: contents;
}

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

/* ══════════════════════════════════════════════════════════════════
   15. AI CONSULTATION  (§21 — PROPOSED extension)
   Billing/system notices are NOT chat bubbles.
   ══════════════════════════════════════════════════════════════════ */
.tp-chat { display: flex; flex-direction: column; gap: var(--tp-space-3); }

.tp-msg {
    max-width: 85%;
    padding: var(--tp-space-3);
    border-radius: var(--tp-radius-md);
    font-size: var(--tp-type-body-size);
    line-height: var(--tp-type-body-lh);
}

.tp-msg--user {
    align-self: flex-end;
    background: var(--tp-surface-accent-quiet);
    border: var(--tp-border-subtle);
    color: var(--tp-text-primary);
}

.tp-msg--ai {
    align-self: flex-start;
    background: var(--tp-surface-card);
    border: var(--tp-border-subtle);
    color: var(--tp-text-primary);
}

.tp-msg--failed { border-color: var(--tp-status-error); border-width: 1.5px; }

/* Wallet / timer — persistent, legible, non-alarming (§21) */
.tp-wallet {
    display: flex;
    align-items: center;
    gap: var(--tp-space-3);
    background: var(--tp-surface-card);
    border: var(--tp-border-subtle);
    border-radius: var(--tp-radius-sm);
    padding: var(--tp-space-2) var(--tp-space-3);
    font-size: var(--tp-type-caption-size);
    font-variant-numeric: tabular-nums;
    color: var(--tp-text-secondary);
}

.tp-wallet--low { border-color: var(--tp-status-warning); color: var(--tp-status-warning); }

.tp-composer {
    display: flex;
    align-items: flex-end;
    gap: var(--tp-space-2);
    padding: var(--tp-space-3) 0 calc(var(--tp-space-3) + var(--tp-safe-bottom));
}

/* ══════════════════════════════════════════════════════════════════
   MASTER SITE HEADER & NAVIGATION COMPONENT (§7.4.1)
   ══════════════════════════════════════════════════════════════════ */
.site-header,
.tp-header {
    width: 100%;
    background-color: var(--tp-surface-card);
    border-bottom: var(--tp-border-subtle);
    position: relative;
    z-index: var(--tp-z-sticky);
}

.site-header__container,
.tp-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tp-space-3);
    min-height: 52px;
    padding-block: 4px;
}

/* ── Brand ────────────────────────────────────────────────────────── */
.site-header__brand,
.tp-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--tp-space-2);
    color: var(--tp-text-primary);
    text-decoration: none;
    font-weight: var(--tp-weight-bold);
    white-space: nowrap;
    flex-shrink: 0;
}

.site-header__brand:hover,
.site-header__brand:focus-visible,
.tp-brand:hover,
.tp-brand:focus-visible {
    color: var(--tp-action-primary-hover);
    text-decoration: none;
}

.site-header__logo,
.tp-brand__mark {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.site-header__site-name,
.tp-brand__title {
    font-family: var(--tp-font-display);
    font-size: var(--tp-type-h2-size);
    line-height: var(--tp-type-h2-lh);
    color: var(--tp-text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.site-header__tagline {
    font-size: var(--tp-type-caption-size);
    color: var(--tp-text-secondary);
    font-weight: var(--tp-weight-regular);
}

/* ── Primary Desktop Navigation ──────────────────────────────────── */
.site-header__navigation {
    display: flex;
    align-items: center;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__item {
    position: relative;
}

.site-nav__link,
.site-nav__disclosure {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    padding-inline: var(--tp-space-2);
    color: var(--tp-text-primary);
    font-size: var(--tp-type-body-size);
    font-weight: var(--tp-weight-medium);
    text-decoration: none;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    border-radius: var(--tp-radius-sm) var(--tp-radius-sm) 0 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--tp-motion-fast) var(--tp-ease), color var(--tp-motion-fast) var(--tp-ease), border-color var(--tp-motion-fast) var(--tp-ease);
}

.site-nav__link:hover,
.site-nav__disclosure:hover,
.site-nav__disclosure[aria-expanded="true"] {
    background-color: var(--tp-surface-sunken);
    color: var(--tp-text-primary);
    text-decoration: none;
}

/* Active Current Page & Section Indicators */
.site-nav__link--current,
.site-nav__link--current-section,
.site-nav__item--current-section > .site-nav__disclosure {
    color: var(--tp-action-primary);
    border-bottom-color: var(--tp-action-primary);
    text-shadow: 0.25px 0 0 currentColor;
}

/* Keyboard Focus Ring (§16) */
.site-header a:focus-visible,
.site-header button:focus-visible {
    outline: var(--tp-focus-ring-width) solid var(--tp-focus-ring-color);
    outline-offset: var(--tp-focus-ring-offset);
    box-shadow: 0 0 0 calc(var(--tp-focus-ring-width) + var(--tp-focus-ring-offset)) var(--tp-focus-halo-color);
}

.site-header input:focus-visible,
.site-header input:focus {
    outline: none;
    border-color: var(--tp-border-color-focus);
    box-shadow: 0 0 0 1px var(--tp-border-color-focus);
}

/* ── Submenu Dropdown ───────────────────────────────────────────── */
.site-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--tp-surface-elevated);
    border: var(--tp-border-subtle);
    border-radius: var(--tp-radius-md);
    box-shadow: var(--tp-elevation-1);
    list-style: none;
    margin: var(--tp-space-1) 0 0 0;
    padding: var(--tp-space-2);
    z-index: var(--tp-z-dropdown);
}

.site-nav__submenu[hidden] {
    display: none !important;
}

.site-nav__submenu .site-nav__link {
    width: 100%;
    justify-content: flex-start;
    border-bottom: none;
    border-radius: var(--tp-radius-xs);
}

.site-nav__chevron {
    transition: transform var(--tp-motion-fast) var(--tp-ease);
}

.site-nav__disclosure[aria-expanded="true"] .site-nav__chevron,
.site-account__trigger[aria-expanded="true"] .site-account__chevron {
    transform: rotate(180deg);
}

/* ── Search Form ─────────────────────────────────────────────────── */
.site-header__search-container {
    display: flex;
    align-items: center;
}

.site-search {
    margin: 0;
}

.site-search__input-wrapper {
    display: inline-flex;
    align-items: center;
    position: relative;
    border: var(--tp-border-control);
    border-radius: var(--tp-radius-pill);
    background: var(--tp-surface-page);
    padding-inline: var(--tp-space-3);
    height: 40px;
}

.site-search__input {
    border: none;
    background: transparent;
    color: var(--tp-text-primary);
    font-size: var(--tp-type-caption-size);
    outline: none;
    width: 160px;
    padding-inline-end: var(--tp-space-5);
}

.site-search__submit {
    border: none;
    background: transparent;
    color: var(--tp-text-secondary);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-width: 24px;
    min-height: 24px;
}

.site-search__submit:hover {
    color: var(--tp-action-primary);
}

.site-search__suggestions {
    position: absolute;
    top: calc(100% + var(--tp-space-1));
    left: 0;
    right: 0;
    min-width: 260px;
    background: var(--tp-surface-elevated);
    border: var(--tp-border-subtle);
    border-radius: var(--tp-radius-md);
    box-shadow: var(--tp-elevation-1);
    list-style: none;
    margin: 0;
    padding: var(--tp-space-2);
    z-index: var(--tp-z-dropdown);
}

.site-search__suggestions[hidden] {
    display: none !important;
}

.site-search__suggestion {
    padding: var(--tp-space-2) var(--tp-space-3);
    border-radius: var(--tp-radius-xs);
    color: var(--tp-text-primary);
    font-size: var(--tp-type-body-size);
    cursor: pointer;
}

.site-search__suggestion.is-active,
.site-search__suggestion:hover {
    background-color: var(--tp-surface-sunken);
}

/* ── Account Actions ─────────────────────────────────────────────── */
.site-header__account {
    display: flex;
    align-items: center;
}

.site-account-menu {
    position: relative;
}

.site-account__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--tp-space-2);
    min-height: var(--tp-target-min);
    padding-inline: var(--tp-space-3);
    border: var(--tp-border-control);
    border-radius: var(--tp-radius-pill);
    background: var(--tp-surface-card);
    color: var(--tp-text-primary);
    cursor: pointer;
    font-size: var(--tp-type-body-size);
}

.site-account__dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 190px;
    background: var(--tp-surface-elevated);
    border: var(--tp-border-subtle);
    border-radius: var(--tp-radius-md);
    box-shadow: var(--tp-elevation-1);
    list-style: none;
    margin-top: var(--tp-space-1);
    padding: var(--tp-space-2);
    z-index: var(--tp-z-dropdown);
}

.site-account__dropdown[hidden] {
    display: none !important;
}

.site-account__item {
    display: flex;
    align-items: center;
    gap: var(--tp-space-2);
    padding: var(--tp-space-2) var(--tp-space-3);
    color: var(--tp-text-primary);
    text-decoration: none;
    font-size: var(--tp-type-body-size);
    border-radius: var(--tp-radius-xs);
}

.site-account__item:hover {
    background-color: var(--tp-surface-sunken);
    color: var(--tp-text-primary);
    text-decoration: none;
}

/* ── Mobile Menu Trigger & Panel ────────────────────────────────── */
.site-header__menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tp-space-2);
    min-width: var(--tp-target-min);
    min-height: var(--tp-target-min);
    padding: var(--tp-space-2) var(--tp-space-3);
    border: var(--tp-border-control);
    border-radius: var(--tp-radius-md);
    background: var(--tp-surface-card);
    color: var(--tp-text-primary);
    cursor: pointer;
    font-weight: var(--tp-weight-medium);
}

.site-header__mobile-panel {
    width: 100%;
    background: var(--tp-surface-card);
    border-bottom: var(--tp-border-strong);
    padding-block: var(--tp-space-4);
    box-shadow: var(--tp-elevation-1);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.site-header__mobile-panel[hidden] {
    display: none !important;
}

.site-nav__list--mobile {
    flex-direction: column;
    align-items: stretch;
    gap: var(--tp-space-2);
}

.site-nav__link--mobile,
.site-nav__disclosure--mobile {
    width: 100%;
    justify-content: space-between;
    padding-block: var(--tp-space-3);
}

.site-nav__submenu--mobile {
    position: static;
    box-shadow: none;
    border: none;
    background: var(--tp-surface-sunken);
    padding-inline-start: var(--tp-space-4);
    margin: 0;
    border-radius: var(--tp-radius-sm);
}

/* ── 320px Viewport Support & Small-Screen Adjustments ────────── */
@media (max-width: 575.98px) {
    .site-header__container {
        padding-inline: var(--tp-space-2);
    }

    .site-search__input {
        width: 110px;
    }
}