/* ta.css — Tamil pages (roadmap 3.5 P2, docs/I18N_TAMIL_PLAN.md §3.4 + §5.10).
 * Heritage refined (3.5, owner-selected concept): cream paper, kumkum + turmeric,
 * temple stripe, dot kolam, crow. Shared by Tamil pages and named-Amavasai twins.
 * Loaded after Tailwind + app.css on Tamil pages only. No inline styles (CSP). */

.ta-page {
    --ta-ground: #F6F0E5;
    --ta-paper: #FFFCF6;
    --ta-ink: #35291F;
    --ta-muted: #705C4C;
    --ta-line: #E5D9C6;
    --ta-line-strong: #D5C4A9;
    --ta-field-line: #B9A07A;
    --ta-accent: #982E26;
    --ta-accent-dark: #7A211B;
    --ta-turmeric: #C98F1A;
    --ta-turmeric-bg: #F7E3AE;
    --ta-turmeric-ink: #4A3000;
    --ta-next-bg: #FFF1CC;
    --ta-notice-bg: #FFF4D6;
    --ta-notice-line: #E9C97A;
    --ta-notice-ink: #8A5A00;
    --ta-display: 'Arima', 'Noto Sans Tamil', sans-serif;
    --ta-body: 'Noto Sans Tamil', sans-serif;

    margin: 0;
    min-height: 100vh;
    background: var(--ta-ground);
    color: var(--ta-ink);
    font-family: var(--ta-body);
    /* Owner 2026-10-26: body 14px, small text 12px, headings one step down (was 17/15);
       inputs stay 16px so iOS Safari does not zoom on focus. */
    font-size: 14px;
    line-height: 1.85;
}

/* Tailwind's .hidden must beat the display rules below. */
.ta-page .hidden { display: none !important; }

.ta-wrap {
    max-width: 1088px;
    margin: 0 auto;
    padding-inline: clamp(16px, 4vw, 32px);
    box-sizing: border-box;
}

.ta-stripe {
    height: 6px;
    background: repeating-linear-gradient(90deg, var(--ta-accent) 0 14px, #FFF8EC 14px 28px);
}

.ta-accent { color: var(--ta-accent); }
.ta-muted { color: var(--ta-muted); }
.ta-small { font-size: 12px; line-height: 1.65; }
.ta-strong { font-weight: 600; }
.ta-nums { font-variant-numeric: tabular-nums; }
.ta-icon { width: 22px; height: 22px; flex: 0 0 auto; }

.ta-link {
    min-height: 44px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    color: var(--ta-accent);
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.ta-link:hover { color: var(--ta-accent-dark); }

/* Header */
.ta-header { border-bottom: 1px solid var(--ta-line); }
.ta-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-block: 16px;
}
.ta-header__start { display: flex; align-items: center; gap: 4px; margin-left: -10px; }
.ta-brand { display: flex; align-items: center; gap: 10px; color: var(--ta-ink); text-decoration: none; }
.ta-brand__crow { width: clamp(40px, 11vw, 48px); height: auto; aspect-ratio: 4 / 3; stroke-width: 2; }
.ta-brand__text { display: flex; flex-direction: column; line-height: 1.3; }
.ta-brand__name { font-family: var(--ta-display); font-size: clamp(19px, 5.4vw, 22px); font-weight: 700; color: var(--ta-accent); white-space: nowrap; }
.ta-brand__method { font-size: 12px; color: var(--ta-muted); }
.ta-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ta-pill {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border: 1px solid var(--ta-line-strong);
    border-radius: 999px;
    color: var(--ta-ink);
    text-decoration: none;
    font-size: 12px;
}
.ta-pill:hover { border-color: var(--ta-accent); color: var(--ta-accent); }
.ta-pill:lang(en) { font-family: system-ui, sans-serif; }
.ta-icon-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ta-ink);
    border-radius: 10px;
    cursor: pointer;
}
.ta-icon-btn:hover { background: #F1E4CC; }
.ta-icon-btn .ta-icon { width: 24px; height: 24px; }

/* Drawer from base.html, re-coloured */
.ta-page #navDrawer { font-family: var(--ta-body); }
.ta-page #navDrawer .gradient-bg { background: var(--ta-accent); }
.ta-page #navDrawer .text-purple-600 { color: var(--ta-accent); }
.ta-page #navDrawer a:hover { background: #FBEFDC; color: var(--ta-accent); }

/* Layout */
.ta-main { display: flex; flex-direction: column; gap: 40px; padding-top: 24px; padding-bottom: 24px; }
.ta-section { display: flex; flex-direction: column; gap: 16px; }
.ta-section__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; }
.ta-section__head p { margin: 2px 0 0; font-size: 14px; }
.ta-h2 { font-family: var(--ta-display); font-size: clamp(21px, 4.5vw, 24px); font-weight: 600; line-height: 1.5; margin: 0; }
.ta-card { background: var(--ta-paper); border: 1px solid var(--ta-line); border-radius: 14px; }

/* 3.5 Heritage refined: city/year selection before the answer; native without JS. */
.ta-location-picker { min-width: 0; }
.ta-location-picker__summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; min-height: 44px; list-style: none; cursor: pointer; }
.ta-location-picker__summary::-webkit-details-marker { display: none; }
.ta-location-picker__city { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ta-location-picker__change { color: var(--ta-accent); font-size: 12px; display: inline-flex; align-items: center; gap: 10px; }
.ta-location-picker__change::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.ta-location-picker[open] .ta-location-picker__change::after { transform: rotate(225deg) translate(-2px, -1px); }
.ta-location-picker__basis { color: var(--ta-muted); font-size: 12px; }
.ta-location-picker .ta-calc { margin-top: 16px; }
#calcTitle { scroll-margin-top: 20px; }

/* Hero: tear-off calendar sheet + next-Amavasya info */
.ta-hero { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
.ta-hero--empty { grid-template-columns: 1fr; }
.ta-sheet { width: 100%; min-width: 0; }
.ta-sheet__binding {
    height: 18px;
    background: var(--ta-ink);
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
}
.ta-sheet__binding span { width: 6px; height: 6px; border-radius: 50%; background: var(--ta-ground); }
.ta-sheet__strip { background: var(--ta-accent); color: #FFFFFF; text-align: center; padding: 7px 10px; font-size: 12px; line-height: 1.65; }
.ta-sheet__month-strip { display: none; }
.ta-sheet__paper {
    position: relative;
    background: var(--ta-paper);
    border: 1px solid var(--ta-line);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 0 18px 22px;
    text-align: center;
    box-shadow: 0 5px 0 -2px #ECE1CD, 0 12px 20px -12px #50351A30;
}
.ta-sheet__perf { border-top: 1px dashed var(--ta-line); margin: 0 -18px 16px; }
.ta-sheet__month { font-size: 14px; color: var(--ta-muted); }
.ta-sheet__day { display: block; font-family: var(--ta-display); font-size: 120px; line-height: 1; font-weight: 600; color: var(--ta-accent); margin: 6px 0 2px; }
.ta-sheet__weekday { font-family: var(--ta-display); font-size: 24px; font-weight: 600; line-height: 1.5; }
.ta-sheet__kolam { display: block; width: 140px; height: 20px; margin: 10px auto 8px; color: var(--ta-turmeric); }
.ta-sheet__tamil { font-family: var(--ta-display); font-size: 22px; font-weight: 600; line-height: 1.5; }
.ta-sheet__badges { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ta-sheet__crow { position: absolute; right: 14px; bottom: 12px; width: 58px; height: 44px; opacity: 0.8; }

.ta-hero__info { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.ta-hero__intro { display: flex; flex-direction: column; gap: 8px; }
.ta-hero__title { font-family: var(--ta-display); font-size: clamp(26px, 3.2vw, 33px); line-height: 1.5; font-weight: 700; margin: 0; }
.ta-hero__city { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ta-hero__city-name { font-size: 16px; font-weight: 600; }
.ta-hero__countdown { margin: 0; font-size: 14px; color: var(--ta-muted); line-height: 1.8; }
.ta-hero__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.ta-hero__tithi { padding-top: 14px; border-top: 1px solid var(--ta-line); display: flex; flex-direction: column; gap: 10px; }
.ta-hero__tithi.ta-card { padding: 16px; }
.ta-hero__sunrise { margin: 4px 0 0; }
.ta-tithi-window { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.ta-tithi-window__end { border-left: 2px solid var(--ta-turmeric); padding-left: 12px; min-width: 0; }
.ta-tithi-window dt { font-size: 12px; color: var(--ta-muted); margin-bottom: 4px; }
.ta-tithi-window dd { margin: 0; }
.ta-tithi-window__date { display: block; font-size: 12px; }
.ta-tithi-window time { display: block; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ta-status:empty { display: none; }

/* Buttons */
.ta-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* 3.5 Heritage refined: keep visible labels on phones as well as desktop. */
.ta-actions--share { gap: 8px; }
.ta-actions--share .ta-btn { min-height: 44px; padding: 8px 12px; gap: 6px; border-radius: 9px; font-size: 12px; }
.ta-share-extra { display: flex; flex-wrap: wrap; gap: 4px; }
.ta-share-extra .ta-btn { padding-inline: 6px; }
.ta-actions--share .ta-icon { width: 16px; height: 16px; }
.ta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 20px;
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.ta-btn--primary { background: var(--ta-accent); color: #FFFFFF; }
.ta-btn--primary:hover { background: var(--ta-accent-dark); }
.ta-btn--ink { background: var(--ta-ink); color: #FFF8EC; }
.ta-btn--ink:hover { background: #000000; }
.ta-btn--outline { border: 1.5px solid var(--ta-ink); color: var(--ta-ink); background: transparent; }
.ta-btn--outline:hover { background: #F1E4CC; }
.ta-btn--ghost { color: var(--ta-accent); background: transparent; padding: 0 12px; }
.ta-btn--ghost:hover { background: #FBEFDC; }
.ta-btn--small { min-height: 44px; font-size: 12px; padding: 0 12px; }
.ta-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ta-btn:focus-visible, .ta-link:focus-visible, .ta-chip:focus-visible, .ta-pill:focus-visible,
.ta-icon-btn:focus-visible, .ta-seg__btn:focus-visible, .ta-input:focus-visible, .ta-more summary:focus-visible,
.ta-location-picker__summary:focus-visible, .ta-muhurta > summary:focus-visible {
    outline: 3px solid var(--ta-turmeric);
    outline-offset: 2px;
}

/* Badges, tags, notices */
.ta-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ta-badge { display: inline-block; border-radius: 999px; padding: 2px 12px; font-size: 12px; font-weight: 600; }
.ta-sheet__badges .ta-badge { font-size: 14px; padding: 4px 16px; }
.ta-badge--turmeric { background: var(--ta-turmeric-bg); color: var(--ta-turmeric-ink); }
.ta-badge--ink { background: var(--ta-ink); color: #FFF6E3; }
.ta-tag { background: var(--ta-accent); color: #FFFFFF; font-size: 12px; border-radius: 999px; padding: 1px 12px; }
.ta-notice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    background: var(--ta-notice-bg);
    border: 1px solid var(--ta-notice-line);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.6;
}
.ta-notice .ta-icon { width: 20px; height: 20px; margin-top: 2px; color: var(--ta-notice-ink); }

/* Important Amavasai cards */
.ta-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ta-imp { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.ta-imp__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ta-imp__name { font-family: var(--ta-display); font-size: 20px; font-weight: 600; color: var(--ta-accent); margin: 0; line-height: 1.5; }
.ta-imp__flower { width: 26px; height: 26px; color: var(--ta-turmeric); flex: 0 0 auto; }
.ta-imp__civil { font-size: 16px; }
.ta-imp__about { margin: 6px 0 0; font-size: 12px; line-height: 1.65; }

/* Calculator */
.ta-calc { padding: clamp(18px, 3vw, 28px); display: flex; flex-direction: column; gap: 16px; }
.ta-calc__form { display: flex; flex-direction: column; gap: 14px; }
.ta-calc__fields { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.ta-field { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ta-field--city { flex: 999 1 280px; }
.ta-field--year { flex: 1 1 320px; }
.ta-label { font-weight: 600; font-size: 14px; }
.ta-input {
    min-height: 52px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1.5px solid var(--ta-field-line);
    border-radius: 12px;
    background: #FFFFFF;
    color: var(--ta-ink);
    font: inherit;
    font-size: 16px;
}
select.ta-input { padding-right: 8px; }
.ta-input:focus { border-color: var(--ta-accent); outline: none; }
.ta-help { font-size: 12px; color: var(--ta-muted); line-height: 1.6; margin: 0; }
.ta-tz { display: flex; gap: 8px; align-items: center; }
.ta-icon-btn--field {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border: 1.5px solid var(--ta-field-line);
    border-radius: 12px;
    background: #FFFFFF;
    color: var(--ta-accent);
}
.ta-icon-btn--field:hover { background: #FBEFDC; }
.ta-tz__value { display: flex; align-items: center; background: var(--ta-paper); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ta-page .autocomplete-item:hover,
.ta-page .autocomplete-item.active { background-color: #FBEFDC; color: var(--ta-accent); }
.ta-page .autocomplete-item:hover span,
.ta-page .autocomplete-item.active span { color: var(--ta-accent); }
.ta-error p { margin: 0; }
.ta-error { background: #FDECEA; border: 1px solid #F1B5AE; color: #7A1D14; border-radius: 12px; padding: 12px 14px; }

/* Year list */
/* Toggle on its own row above the title: the Tamil and Gregorian titles differ in length, and
   wrapping beside/below them moved the toggle on every click (owner report 2026-10-26). */
.ta-list__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ta-list__head .ta-seg { order: -1; }
.ta-list__head p { margin: 2px 0 0; font-size: 14px; }
.ta-seg { display: inline-flex; border: 1px solid var(--ta-line-strong); border-radius: 999px; padding: 3px; gap: 3px; background: var(--ta-paper); }
.ta-seg__btn { min-height: 44px; padding: 0 18px; border-radius: 999px; color: var(--ta-ink); font: inherit; font-size: 12px; cursor: pointer; }
.ta-seg__btn[aria-pressed="true"] { background: var(--ta-ink); color: #FFF8EC; }
.ta-rows { display: flex; flex-direction: column; }
.ta-row { display: flex; gap: 14px; padding: 16px 12px; border-top: 1px solid var(--ta-line); border-radius: 10px; }
.ta-row--past { opacity: 0.78; }
.ta-row--next { background: var(--ta-next-bg); }
.ta-row__date { flex: 0 0 76px; text-align: center; line-height: 1.25; display: flex; flex-direction: column; }
.ta-row__month { font-size: 12px; color: var(--ta-muted); }
.ta-row__day { font-family: var(--ta-display); font-size: 36px; font-weight: 700; color: var(--ta-accent); }
.ta-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ta-row__civil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.ta-row__tithi { font-size: 12px; color: var(--ta-muted); font-variant-numeric: tabular-nums; }
.ta-more { font-size: 12px; color: var(--ta-muted); }
.ta-more summary { cursor: pointer; min-height: 32px; width: fit-content; }
.ta-more p { margin: 0 0 0 4px; }

/* Customs */
.ta-customs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.ta-custom { display: flex; gap: 14px; align-items: flex-start; }
.ta-custom__icon {
    flex: 0 0 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ta-turmeric-bg);
    color: var(--ta-turmeric-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ta-custom__icon .ta-icon { width: 28px; height: 28px; stroke-width: 1.6; }
.ta-custom__icon .ta-crow { width: 34px; height: 26px; stroke-width: 2.6; }
.ta-custom__title { margin: 0; font-size: 16px; font-weight: 700; }
.ta-custom p { margin: 2px 0 0; font-size: 12px; line-height: 1.65; }

/* Cities */
.ta-differ { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; font-size: 14px; line-height: 1.65; }
.ta-differ .ta-icon { margin-top: 3px; }
.ta-differ ul { margin: 2px 0 0; }
.ta-city-group { display: flex; flex-direction: column; gap: 8px; }
.ta-city-group__title { margin: 0; font-size: 14px; font-weight: 700; color: var(--ta-muted); }
.ta-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ta-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border: 1px solid var(--ta-line-strong);
    border-radius: 999px;
    background: var(--ta-paper);
    color: var(--ta-ink);
    text-decoration: none;
    font-size: 14px;
}
.ta-chip:hover { border-color: var(--ta-accent); color: var(--ta-accent); }

/* Method */
.ta-method { margin: 0; padding-left: 22px; list-style: disc; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }

/* Important-Amavasai card link to its page (3.5 P4a) */
.ta-imp__link { margin-top: 4px; width: fit-content; }

/* Named-Amavasai pages (3.5 P4a): head, tabs, town table, FAQ */
.ta-fest__head { display: flex; flex-direction: column; gap: 10px; }
.ta-fest__head p { margin: 0; }
.ta-crumbs { font-size: 12px; color: var(--ta-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ta-crumbs a { color: var(--ta-accent); }
.ta-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ta-pill--on { background: var(--ta-accent); border-color: var(--ta-accent); color: #FFFFFF; font-weight: 600; }
.ta-pill--on:hover { color: #FFFFFF; }
.ta-fest__about { margin: 0; font-size: 16px; line-height: 1.7; }
.ta-towns { width: 100%; border-collapse: collapse; background: var(--ta-paper); border: 1px solid var(--ta-line); border-radius: 12px; overflow: hidden; font-size: 14px; }
.ta-towns th, .ta-towns td { text-align: left; vertical-align: top; padding: 10px 14px; border-top: 1px solid var(--ta-line); }
.ta-towns thead th { border-top: 0; font-size: 12px; font-weight: 600; color: var(--ta-muted); background: var(--ta-ground); }
.ta-towns tbody th { font-weight: 600; }
.ta-towns__town { color: var(--ta-ink); text-decoration: underline; text-decoration-color: var(--ta-line-strong); text-underline-offset: 3px; }
.ta-towns__town:hover { color: var(--ta-accent); }
.ta-towns__tithi { font-size: 12px; color: var(--ta-muted); }
.ta-towns__differs { background: var(--ta-next-bg); }
.ta-towns .ta-tag { font-size: 12px; white-space: nowrap; }
@media (max-width: 640px) {
    .ta-towns thead { display: none; }
    .ta-towns tr { display: block; padding: 10px 14px; border-top: 1px solid var(--ta-line); }
    .ta-towns tbody tr:first-child { border-top: 0; }
    .ta-towns th, .ta-towns td { display: block; padding: 0; border: 0; }
}
.ta-faq h3 { margin: 0; font-size: 16px; font-weight: 700; }
.ta-faq p { margin: 4px 0 0; }

/* Footer */
.ta-footer { margin-top: 40px; background: var(--ta-paper); color: var(--ta-muted); border-top: 1px solid var(--ta-line); }
.ta-footer__row { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; padding-block: 32px; }
.ta-footer__about { display: flex; flex-direction: column; gap: 4px; flex: 1 1 280px; font-size: 12px; }
.ta-footer__brand { font-family: var(--ta-display); font-size: 20px; font-weight: 600; color: var(--ta-accent); }
.ta-footer__credit { font-size: 12px; color: var(--ta-muted); }
.ta-footer a { color: var(--ta-ink); }
.ta-footer__links { display: flex; flex-direction: column; flex: 1 1 200px; }
.ta-footer__links a { min-height: 40px; display: flex; align-items: center; }

/* 3.5 P4 knowledge pages (templates/ta/knowledge/*.html) */
.ta-kn { display: flex; flex-direction: column; gap: 24px; padding-top: 24px; max-width: 900px; }
.ta-kn__crumbs { font-size: 12px; color: var(--ta-muted); }
.ta-kn__crumbs a { color: var(--ta-accent); }
.ta-kn__article { padding: clamp(20px, 4vw, 44px); display: flex; flex-direction: column; gap: 28px; }
.ta-kn__head { display: flex; align-items: center; gap: 14px; padding-bottom: 22px; border-bottom: 1px solid var(--ta-line); }
.ta-kn__flower { width: 40px; height: 40px; color: var(--ta-turmeric); flex: 0 0 auto; }
.ta-kn__title { font-family: var(--ta-display); font-size: clamp(25px, 5vw, 32px); font-weight: 600; line-height: 1.5; margin: 0; color: var(--ta-accent); }
.ta-kn__lead { margin: 0; font-size: 16px; line-height: 1.95; }
.ta-kn__section { display: flex; flex-direction: column; gap: 12px; }
.ta-kn__section + .ta-kn__section { padding-top: 24px; border-top: 1px solid var(--ta-line); }
.ta-kn__section p { margin: 0; }
.ta-kn__h2 { font-family: var(--ta-display); font-size: clamp(20px, 4.5vw, 23px); font-weight: 600; line-height: 1.5; margin: 0; }
.ta-kn__rule { border-left: 4px solid var(--ta-accent); padding-left: 14px; font-weight: 500; }
.ta-kn__example { background: var(--ta-ground); border-left: 2px solid var(--ta-turmeric); border-radius: 0 9px 9px 0; padding: 14px 16px; font-size: 14px; }
.ta-kn__list { margin: 0; padding-left: 22px; list-style: disc; display: flex; flex-direction: column; gap: 8px; }
.ta-kn__list a, .ta-kn__section p a { color: var(--ta-accent); }
.ta-kn__named { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ta-kn__named-item { border: 1px solid var(--ta-line); border-radius: 10px; padding: 14px 16px; background: var(--ta-ground); }
.ta-kn__named dt { font-family: var(--ta-display); font-size: 18px; font-weight: 700; color: var(--ta-accent); }
.ta-kn__named dd { margin: 4px 0 0; font-size: 12px; line-height: 1.65; }
.ta-kn__cta { margin: 0; }
.ta-kn__related { display: flex; flex-direction: column; gap: 10px; }
.ta-kn__related-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--ta-muted); }
/* Tithi chart: 15 cells per fortnight, wraps on phones; Pournami/Amavasya span two cells. */
.ta-kn-tithi { margin: 4px 0 0; display: flex; flex-direction: column; gap: 14px; }
.ta-kn-tithi__row { display: flex; flex-direction: column; gap: 6px; }
.ta-kn-tithi__label { margin: 0; font-size: 14px; font-weight: 700; }
.ta-kn-tithi__cells { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 4px; }
.ta-kn-tithi__cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 66px; padding: 10px 4px; border: 1px solid var(--ta-line); border-radius: 8px; background: var(--ta-paper); line-height: 1.5; }
.ta-kn-tithi__num { font-family: var(--ta-display); font-size: 12px; font-weight: 700; text-align: center; }
.ta-kn-tithi__deg { font-size: 12px; color: var(--ta-muted); white-space: nowrap; }
.ta-kn-tithi__cell--full, .ta-kn-tithi__cell--new { grid-column: span 2; }
.ta-kn-tithi__cell--full { background: var(--ta-turmeric-bg); border-color: var(--ta-turmeric); }
.ta-kn-tithi__cell--new { background: var(--ta-ink); border-color: var(--ta-ink); color: #FFF8EC; }
.ta-kn-tithi__cell--new .ta-kn-tithi__deg { color: #E8D9BE; }
.ta-kn-tithi__cell--full .ta-kn-tithi__num, .ta-kn-tithi__cell--new .ta-kn-tithi__num { font-size: 14px; }
/* end 3.5 P4 knowledge pages */
/* 3.5 P4 festival pages: Tamil weekday-variant pages (templates/ta/variant.html,
   templates/ta/partials/inner_page.html). */
.ta-inner { gap: 40px; }
.ta-inner__intro { margin: 0; font-size: 14px; max-width: 760px; }
.ta-inner__empty { margin: 0; padding: 16px 18px; font-weight: 600; }
.ta-crumbs { color: var(--ta-muted); }
.ta-crumbs .ta-link { min-height: 0; }
.ta-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ta-tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border: 1px solid var(--ta-line-strong);
    border-radius: 999px;
    background: var(--ta-paper);
    color: var(--ta-ink);
    text-decoration: none;
    font-size: 14px;
}
.ta-tab:hover { border-color: var(--ta-accent); color: var(--ta-accent); }
.ta-tab--current { background: var(--ta-accent); border-color: var(--ta-accent); color: #FFFFFF; font-weight: 600; }
.ta-tab:focus-visible { outline: 3px solid var(--ta-turmeric); outline-offset: 2px; }
/* FAQ list: .ta-faqs / .ta-faq rules live in the city page section below. */
/* end 3.5 P4 festival pages */
/* 3.5 P4 city page ---------------------------------------------------------
 * Tamil city pages + hub (templates/ta/city.html, templates/ta/city_index.html).
 * Self-contained: only .ta-cityp / .ta-crumbs / .ta-years / .ta-faq* / .ta-hub* /
 * .ta-list-panel / .ta-chip--current rules live here. */
.ta-cityp { gap: 40px; }
.ta-crumbs { font-size: 12px; color: var(--ta-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ta-crumbs a { color: var(--ta-accent); text-underline-offset: 3px; min-height: 32px; display: inline-flex; align-items: center; }
.ta-years .ta-chips { gap: 8px; }
.ta-chip--current { background: var(--ta-ink); color: #FFF8EC; border-color: var(--ta-ink); }
.ta-list-panel { display: flex; flex-direction: column; gap: 16px; }
.ta-faqs { display: flex; flex-direction: column; gap: 18px; }
.ta-faq { border-top: 1px solid var(--ta-line); padding-top: 14px; }
.ta-faq__q { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.5; }
.ta-faq__a { margin: 6px 0 0; font-size: 14px; line-height: 1.75; }
.ta-cityp__other { margin: 0; text-align: center; color: var(--ta-muted); font-size: 14px; }
.ta-hub__group { font-size: clamp(19px, 4.8vw, 23px); }
.ta-hub__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ta-hub__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 10px;
    padding: 12px 14px;
    background: var(--ta-paper);
    border: 1px solid var(--ta-line);
    border-radius: 12px;
}
.ta-hub__name { color: var(--ta-ink); font-weight: 600; font-size: 14px; min-height: 36px; display: inline-flex; align-items: center; }
.ta-hub__name:hover { color: var(--ta-accent); }
.ta-hub__years { font-size: 12px; color: var(--ta-muted); font-variant-numeric: tabular-nums; }
.ta-hub__years a { color: var(--ta-muted); }
.ta-hub__years a:hover { color: var(--ta-accent); }
.ta-hub__name:focus-visible, .ta-hub__years a:focus-visible, .ta-crumbs a:focus-visible {
    outline: 3px solid var(--ta-turmeric);
    outline-offset: 2px;
}
/* end 3.5 P4 city page */
/* 3.5 P4 nalla neram + Deepavali (owner review #15-19; templates/ta/index.html) ---- */
.ta-muhurta { padding: 0 18px; }
.ta-muhurta > summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; font-weight: 600; list-style: none; }
.ta-muhurta > summary::-webkit-details-marker { display: none; }
.ta-muhurta > summary::after { content: '+'; font: 400 24px/1 sans-serif; color: var(--ta-accent); }
.ta-muhurta[open] > summary::after { content: '−'; }
.ta-muhurta__body { display: flex; flex-direction: column; gap: 12px; padding-bottom: 18px; }
.ta-kalams { list-style: none; margin: 0; padding: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 20px; border-bottom: 1px solid var(--ta-line); }
.ta-kalam__name { font-weight: 700; color: var(--ta-accent); }
.ta-muhurta__title { font-family: var(--ta-display); font-size: 16px; font-weight: 700; margin: 0; }
.ta-gowri { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ta-gowri__name { display: inline-block; min-width: 72px; font-weight: 700; }
.ta-more .ta-gowri { margin: 6px 0 0 4px; color: var(--ta-ink); }
.ta-muhurta .ta-nums { font-size: 12px; }
.ta-badge--accent { border: 1px solid var(--ta-accent); color: var(--ta-accent); padding: 0 10px; font-size: 12px; }
#deepavaliSection { gap: 10px; padding: 18px 20px; border-radius: 12px; background: #EFE5D2; }
#deepavaliSection .ta-h2 { font-size: 20px; }
#deepavaliCard { padding: 0; border: 0; background: transparent; }
/* end 3.5 P4 nalla neram + Deepavali */

/* 3.5 Heritage refined: one responsive date composition on every calendar page. */
@media (max-width: 760px) {
    .ta-hero { grid-template-columns: 210px minmax(0, 1fr); gap: 24px; }
    .ta-sheet__binding { gap: 80px; }
    .ta-hero__title { font-size: 28px; }
    .ta-tithi-window { gap: 12px; }
}
@media (max-width: 600px) {
    .ta-main { gap: 30px; padding-top: 16px; }
    .ta-header__row { padding-block: 12px; flex-wrap: nowrap; gap: 6px; }
    .ta-header__start { gap: 0; min-width: 0; }
    .ta-brand { gap: 6px; min-width: 0; }
    .ta-brand__text { min-width: 0; }
    .ta-brand__crow { width: 26px; flex-shrink: 0; }
    .ta-brand__name { font-size: clamp(16px, 4.3vw, 18px); white-space: normal; }
    .ta-brand__method { font-size: 12px; }
    .ta-header__actions { gap: 0; flex-shrink: 0; }
    .ta-header__actions .ta-pill { padding-inline: 8px; }
    .ta-hero { grid-template-columns: 120px minmax(0, 1fr); gap: 18px 16px; }
    .ta-hero__info { display: contents; }
    .ta-hero__intro { grid-column: 2; align-self: center; }
    .ta-hero__title { font-size: 26px; }
    .ta-hero__countdown { font-size: 12px; }
    .ta-hero__tithi, .ta-hero__info > .ta-actions, .ta-hero__info > .ta-status,
    .ta-hero__info > .ta-error, .ta-hero__info > .ta-notice { grid-column: 1 / -1; }
    .ta-hero--empty { display: block; }
    .ta-hero--empty .ta-hero__info { display: flex; }
    .ta-sheet__binding { height: 14px; gap: 44px; border-radius: 9px 9px 0 0; }
    .ta-sheet__binding span { width: 4px; height: 4px; }
    .ta-sheet__strip { font-size: 11px; padding: 5px 6px; }
    .ta-sheet__year { display: none; }
    .ta-sheet__month-strip { display: inline; }
    .ta-sheet__paper { padding: 0 10px 14px; border-radius: 0 0 9px 9px; }
    .ta-sheet__perf { margin: 0 -10px 10px; }
    .ta-sheet__month { font-size: 12px; }
    .ta-sheet__day { font-size: 82px; }
    .ta-sheet__weekday { font-size: 18px; }
    .ta-sheet__kolam { width: 80px; height: 14px; margin-block: 6px; }
    .ta-sheet__tamil { font-size: 16px; }
    .ta-hero__badges .ta-badge { padding: 2px 8px; }
    .ta-tithi-window__end { padding-left: 10px; }
    .ta-tithi-window time { font-size: 15px; }
    .ta-actions--share { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
    .ta-actions--share > .ta-btn { justify-content: center; }
    .ta-share-extra { justify-content: flex-start; }
    .ta-location-picker__summary { gap: 4px; }
    .ta-location-picker__basis { flex-basis: 100%; }
    .ta-calc { padding: 18px 16px; }
    .ta-field--year { flex-basis: 100%; }
    .ta-kalams { flex-direction: column; gap: 8px; }
    .ta-kalam { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between; font-size: 12px; }
    .ta-gowri__part { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
    .ta-gowri__name { min-width: 60px; }
    .ta-kn__article { padding: 22px 18px; }
    .ta-kn__head { gap: 10px; }
    .ta-kn__flower { width: 30px; height: 30px; }
    .ta-kn__lead { font-size: 14px; }
}
@media (max-width: 360px) {
    .ta-brand__crow { display: none; }
    .ta-hero { grid-template-columns: 108px minmax(0, 1fr); gap: 16px 12px; }
    .ta-hero__title { font-size: 24px; }
    .ta-hero__city { font-size: 12px; }
}

/* 3.5 P4 fix: while /ta/ loads another town than the server rendered (tamil-home.js
   setSwitching), hide the default town's dates so they never read as the answer. */
.ta-home--switching .ta-hero [id^="hero"]:not(#heroTitle),
.ta-home--switching #heroCity,
.ta-home--switching #muhurtaSection,
.ta-home--switching #importantCards,
.ta-home--switching #deepavaliSection,
.ta-home--switching #resultRows { visibility: hidden; }

/* Calculating (owner 2026-10-26; templates/ta/index.html #busyOverlay, tamil-home.js showLoading):
   the page blurs and a crow flies inside a turning kolam ring until the engine answers. Fades in
   after 150ms so lists served from the cache do not flash it. */
.ta-busy {
    position: fixed; inset: 0; z-index: 60;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    padding: 24px; text-align: center; background: rgba(248, 240, 225, 0.55);
    animation: ta-busy-in 0.2s ease 0.15s both;
}
.ta-busy[hidden] { display: none; }
body.ta-busy-on > :not(.ta-busy):not(script):not(template) {
    filter: blur(4px); pointer-events: none; user-select: none; transition: filter 0.2s ease 0.15s;
}
.ta-busy__spin { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.ta-busy__spin::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 4px dotted var(--ta-accent); animation: ta-spin 2.4s linear infinite;
}
.ta-busy .ta-busy__crow { width: 72px; height: 54px; color: var(--ta-accent); stroke-width: 2.4; animation: ta-fly 0.6s ease-in-out infinite alternate; }
.ta-busy__text { margin: 0; max-width: 300px; font-weight: 600; color: var(--ta-ink); }
@keyframes ta-busy-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ta-spin { to { transform: rotate(360deg); } }
@keyframes ta-fly { from { transform: translateY(5px) rotate(-4deg); } to { transform: translateY(-7px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) {
    .ta-busy__spin::before, .ta-busy .ta-busy__crow { animation: none; }
}