/* =========================================================================
   Tamil Calendar — consolidated stylesheet (v1.15.4)
   Mobile-first, token-based. Replaces the accumulated legacy file: all dead
   selectors (.calendar-*, .empty-day, .day-number, .tamil-calendar-grid,
   .tc-modal overlay/.tc-modal-inner/-content/-close/-header/-body,
   .tc-event-wrapper, .tc-more-events, .tamil-month-start, widgets,
   fadeIn/slideUp) and duplicated 576/768/769/900 media blocks have been
   removed and folded into the design tokens + one 769px breakpoint.

   Live surfaces only:
   - Calendar grid + header + daily panel  (.tamil-calendar-wrapper, tc-*)
   - JS-injected day detail + sheet + lightbox  (#tc-modal-*, tc-lightbox-*)
   - Events-list shortcodes  (.tel-wrapper, tel-*)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Tamil:wght@400;600;700&display=swap');

/* ---- Design tokens (shared by both wrappers) ---- */
.tamil-calendar-wrapper,
.tel-wrapper {
    --tc-accent: #c41e3a;
    --tc-accent-2: #e63462;
    --tc-grad: linear-gradient(135deg, #c41e3a 0%, #e63462 100%);
    --tc-ink: #1f2430;
    --tc-muted: #6b7280;
    --tc-line: #e9ebf0;
    --tc-surface: #ffffff;
    --tc-surface-2: #f7f8fa;
    --tc-weekend: #f4f6f8;
    --tc-tint: #fdeef0;
    --tc-tint-line: #f3c3cd;
    --tc-radius: 16px;
    --tc-radius-sm: 10px;
    --tc-gap: clamp(4px, 1.2vw, 10px);
    --tc-shadow: 0 6px 24px rgba(20, 24, 40, 0.08);
    --tc-shadow-sm: 0 2px 8px rgba(20, 24, 40, 0.06);
    --tc-font: 'Noto Sans Tamil', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* =========================================================================
   CALENDAR WRAPPER + HEADER
   ========================================================================= */
/* Scoped box-model reset — themes that set content-box made the 7-col
   grid (cells + 6px padding + 1px border ×7) overflow the wrapper, which
   has overflow:hidden, so the last (Saturday) column was clipped. */
.tamil-calendar-wrapper,
.tamil-calendar-wrapper *,
.tamil-calendar-wrapper *::before,
.tamil-calendar-wrapper *::after {
    box-sizing: border-box;
}

.tamil-calendar-wrapper {
    font-family: var(--tc-font);
    max-width: min(1180px, 100%);
    margin: 0 auto;
    background: var(--tc-surface);
    color: var(--tc-ink);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-shadow);
    overflow: hidden;
}

.tc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: clamp(14px, 3vw, 22px) clamp(14px, 3vw, 24px);
    background: var(--tc-grad);
    color: #fff;
}

.tc-title {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: center;
    line-height: 1.35;
}

.tc-gregorian-month {
    font-size: clamp(16px, 2.4vw, 21px);
    font-weight: 700;
    letter-spacing: 0.2px;
}

.tc-tamil-months,
.tc-tamil-year {
    font-size: clamp(12px, 1.8vw, 14px);
    opacity: 0.92;
}

/* Stacked-column header needs no inline pipe separators */
.tc-separator {
    display: none;
}

.tc-nav-prev,
.tc-nav-next,
.tc-today {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

.tc-nav-prev:hover,
.tc-nav-next:hover,
.tc-today:hover {
    background: rgba(255, 255, 255, 0.30);
    transform: translateY(-1px);
}

.tc-nav-prev:active,
.tc-nav-next:active,
.tc-today:active {
    transform: scale(0.94);
}

/* =========================================================================
   LAYOUT — mobile stack; two-column + sticky panel at 769px+
   ========================================================================= */
.tc-main-area {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tc-left-column {
    width: 100%;
    min-width: 0;
}

.tc-calendar {
    padding: clamp(12px, 3vw, 20px);
}

/* =========================================================================
   WEEKDAYS + DATE GRID
   ========================================================================= */
.tc-weekdays,
.tc-dates-grid {
    display: grid;
    /* minmax(0,1fr) lets the 7 tracks shrink to fit the viewport instead
       of being forced wider by cell content (which clipped Saturday). */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--tc-gap);
}

.tc-weekdays {
    margin-bottom: var(--tc-gap);
}

.tc-weekday {
    padding: 8px 0;
    text-align: center;
    color: var(--tc-muted);
    font-size: clamp(11px, 1.6vw, 13px);
    font-weight: 600;
}

.tc-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
    min-height: clamp(54px, 14vw, 72px);
    padding: 6px;
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-surface);
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease,
                transform 0.16s ease, background 0.16s ease;
}

.tc-day:hover:not(.tc-day-empty) {
    border-color: var(--tc-accent);
    box-shadow: var(--tc-shadow-sm);
    transform: translateY(-2px);
    z-index: 2;
}

.tc-day-empty {
    border-color: transparent;
    background: transparent;
    cursor: default;
    pointer-events: none;
}

.tc-day-gregorian {
    font-size: clamp(14px, 2.4vw, 17px);
    font-weight: 700;
    color: var(--tc-ink);
    line-height: 1;
}

.tc-day-tamil {
    margin-top: auto;
    align-self: flex-end;
}

.tc-tamil-date-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--tc-surface-2);
    color: var(--tc-muted);
    font-size: clamp(10px, 1.6vw, 12px);
    font-weight: 600;
}

/* Event icons — always real emojis, every breakpoint */
.tc-events-indicator {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 3px 0 2px;
}

.tc-event-emoji {
    font-size: clamp(13px, 2.4vw, 16px);
    line-height: 1;
    /* Dark halo so pale/gold emojis (✨ 🌙) stay visible on the light
       cell tints — a white shadow made them disappear. */
    text-shadow:
        0 0 1px rgba(0, 0, 0, 0.45),
        0 1px 1px rgba(0, 0, 0, 0.22);
}

/* Tamil-month-start label — accent pill that fits the rounded cell */
.tc-tamil-month-start::before {
    content: attr(data-month-label);
    display: block;
    margin: -2px -2px 4px -2px;
    padding: 2px 4px;
    border-radius: 7px 7px 4px 4px;
    background: var(--tc-accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Day states ---- */
.tc-day-weekend:not(.tc-day-today) {
    background: var(--tc-weekend);
}

.tc-day-has-events:not(.tc-day-today) {
    border-color: var(--tc-tint-line);
}

.tc-day.tc-color-holiday:not(.tc-day-today),
.tc-day.tc-color-festival:not(.tc-day-today) {
    background: var(--tc-tint);
    border-color: var(--tc-tint-line);
}

/* ---- Tier 1: per-category colour cue (DB event-type colours) ---------------
   --tc-cat / --tc-cat-bg are emitted once by the renderer's <style id=
   "tc-cat-colors"> from wp_tamil_event_types; the JS month-nav renderer
   reuses the same map. Today/selected highlight must still win. */
.tc-day.tc-has-cat:not(.tc-day-today):not(.tc-day-selected) {
    border-left: 4px solid var(--tc-cat, var(--tc-tint-line));
    background: var(--tc-cat-bg, var(--tc-surface));
}

/* "+N more" badge after the capped emoji row */
.tc-event-more {
    align-self: center;
    font-size: clamp(9px, 1.5vw, 11px);
    font-weight: 700;
    color: var(--tc-muted);
    line-height: 1;
}

/* First event name — hidden on phones (no room), revealed ≥769px */
.tc-event-name {
    display: none;
    margin: 1px 0 2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.2;
    color: var(--tc-ink);
}

/* Phone: cap to 2 emojis so the fixed 7-col grid never reflows
   (the "+N" badge — last child — stays visible) */
.tc-events-indicator .tc-event-emoji:nth-child(3) {
    display: none;
}

/* Tamil date gets visual priority; Gregorian de-emphasised
   (kept within the existing clamp() ranges → grid metrics unchanged) */
.tc-tamil-date-number {
    font-size: clamp(12px, 2vw, 14px);
    color: var(--tc-ink);
}
.tc-day-gregorian {
    font-weight: 600;
    color: var(--tc-muted);
}

.tc-day-today {
    background: var(--tc-grad);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(196, 30, 58, 0.35);
}

.tc-day-today .tc-day-gregorian {
    color: #fff;
}

.tc-day-today .tc-tamil-date-number {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.tc-day-today .tc-event-emoji {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.tc-day-today.tc-tamil-month-start::before {
    background: rgba(255, 255, 255, 0.28);
}

.tc-day-selected:not(.tc-day-today) {
    border-color: var(--tc-accent);
    box-shadow: 0 0 0 2px var(--tc-accent) inset;
    background: #fff5f7;
}

/* =========================================================================
   DAILY PANEL
   ========================================================================= */
.tc-daily-panel {
    width: 100%;
    border-top: 1px solid var(--tc-line);
    background: var(--tc-surface-2);
}

.tc-daily-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px clamp(14px, 3vw, 20px);
    background: var(--tc-grad);
    color: #fff;
}

.tc-daily-panel-title {
    flex: 1;
    margin: 0;
    text-align: center;
    font-size: clamp(14px, 2.2vw, 17px);
    font-weight: 700;
    color: #fff;
}

.tc-day-prev,
.tc-day-next {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.18s ease;
}

.tc-day-prev:hover,
.tc-day-next:hover {
    background: rgba(255, 255, 255, 0.32);
}

.tc-daily-panel-body {
    padding: clamp(14px, 3vw, 22px);
}

/* ---- Loading / error / no-data ---- */
.tc-loading {
    padding: 40px;
    text-align: center;
    color: var(--tc-muted);
}

.tc-loading::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    border: 3px solid var(--tc-line);
    border-top: 3px solid var(--tc-accent);
    border-radius: 50%;
    animation: tc-spin 1s linear infinite;
    vertical-align: middle;
}

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

.tc-error,
.tc-no-data {
    padding: 40px;
    text-align: center;
    color: var(--tc-muted);
}

.tc-no-data p:first-child {
    font-size: 22px;
    margin: 0 0 6px;
}

/* ---- Calendar sheet image ---- */
#tc-modal-calendar-sheet {
    margin-bottom: 20px;
}

#tc-modal-calendar-sheet h4 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--tc-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tc-calendar-sheet-wrapper {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto 18px;
    border-radius: var(--tc-radius-sm);
    overflow: hidden;
    background: var(--tc-surface-2);
}

/* Shimmer skeleton sits behind the image (img is z-index 2) */
.tc-calendar-sheet-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, #f0f0f0 0%, #f8f8f8 50%, #f0f0f0 100%);
    background-size: 200% 100%;
    animation: tc-shimmer 1.5s infinite;
}

@keyframes tc-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.tc-calendar-sheet-image,
.tc-calendar-sheet-wrapper img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--tc-radius-sm);
    box-shadow: var(--tc-shadow-sm);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease;
}

.tc-calendar-sheet-image:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(196, 30, 58, 0.2);
}

.tc-sheet-not-found {
    padding: 56px 20px;
    background: var(--tc-surface-2);
    border: 2px dashed var(--tc-line);
    border-radius: var(--tc-radius-sm);
    color: var(--tc-muted);
    text-align: center;
    font-size: 13px;
}

.tc-sheet-not-found::before {
    content: '📅';
    display: block;
    font-size: 44px;
    margin-bottom: 10px;
    opacity: 0.5;
}

/* ---- Day-detail info ---- */
/* ---- Single-column "almanac sheet" card (Vakya-styled, modern) ---- */
.tc-sheet {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Bold accent header band echoing the legacy Vakya sheet top */
.tc-sheet-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--tc-radius-sm);
    background: var(--tc-grad);
    color: #fff;
}
.tc-sheet-daynum {
    flex: 0 0 auto;
    font-size: clamp(34px, 9vw, 52px);
    font-weight: 800;
    line-height: 1;
}
.tc-sheet-summary-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.tc-sheet-weekday {
    font-weight: 700;
    font-size: clamp(14px, 2.4vw, 17px);
}
.tc-sheet-tamildate {
    font-weight: 600;
    font-size: clamp(13px, 2vw, 15px);
    opacity: 0.95;
}
.tc-sheet-hijri {
    font-size: 12px;
    opacity: 0.85;
}

/* Boxed group with a banded header (Vakya feel) */
.tc-sheet-grp {
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius-sm);
    overflow: hidden;
    background: var(--tc-surface);
    box-shadow: var(--tc-shadow-sm);
}
.tc-sheet-grp-h {
    padding: 7px 12px;
    background: var(--tc-surface-2);
    border-bottom: 1px solid var(--tc-line);
    color: var(--tc-accent);
    font-size: 13px;
    font-weight: 700;
}
.tc-sheet-grp .tc-pc-tag {
    background: transparent;
    color: inherit;
    opacity: 0.75;
    font-weight: 600;
}

/* Timing groups stack full-width. The day panel is a narrow (~360–430px)
   sticky sidebar on desktop; the Nalla/Gowri rows carry two comma-joined
   ranges that need the full width (a 2-up grid clipped them). The legacy
   Vakya sheet also stacks these. */
.tc-sheet-timings {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* Long timing values must wrap on spaces, never be clipped */
.tc-sheet-grp td:last-child,
.tc-pc-table td:last-child {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Compact, bold rows shared by computed + static-fallback tables */
.tc-sheet-grp table,
.tc-pc-table {
    width: 100%;
    border-collapse: collapse;
}
.tc-sheet-grp td,
.tc-pc-table td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--tc-line);
    font-size: 13px;
    line-height: 1.35;
    vertical-align: top;
}
.tc-sheet-grp tr:last-child td,
.tc-pc-table tr:last-child td {
    border-bottom: 0;
}
.tc-sheet-grp td:first-child,
.tc-pc-table td:first-child {
    width: 42%;
    color: var(--tc-muted);
    font-weight: 600;
    white-space: nowrap;
}
.tc-sheet-grp td:last-child,
.tc-pc-table td:last-child {
    color: var(--tc-ink);
    font-weight: 700;
}
.tc-pc-end {
    color: var(--tc-muted);
    font-size: 12px;
    font-weight: 600;
}

#tc-modal-events .tc-events-inline { padding: 10px 12px; }

/* Dedicated events slot: sits above the day-nav header (directly below the
   month grid). Collapses fully when the day has no events. */
.tc-day-events:empty { display: none; }
.tc-day-events.is-populated {
    padding: clamp(12px, 3vw, 20px);
}

/* Prominent events box: pulled to the top of the day sheet so a tapped day's
   events are seen immediately (month-grid cells can't show full text). */
.tc-sheet-events-top {
    border-color: var(--tc-tint-line);
    box-shadow: 0 0 0 1px var(--tc-tint-line), var(--tc-shadow-sm);
}
.tc-sheet-events-top .tc-sheet-grp-h {
    background: var(--tc-grad);
    border-bottom-color: var(--tc-tint-line);
    color: #fff;
    font-size: 15px;
}
.tc-sheet-events-top .tc-events-inline { padding: 12px; gap: 10px; }
.tc-sheet-events-top .tc-event-item {
    background: var(--tc-surface);
    border: 1px solid var(--tc-tint-line);
    padding: 7px 13px;
    font-weight: 700;
}
.tc-events-empty {
    display: block;
    padding: 14px 16px;
    color: var(--tc-muted);
    font-size: 14px;
}

.tc-events-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tc-event-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--tc-tint);
    color: var(--tc-accent);
    font-size: 13px;
    font-weight: 600;
}

/* =========================================================================
   IMAGE LIGHTBOX (JS toggles .tc-lightbox-open / body lock)
   ========================================================================= */
.tc-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.88);
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.tc-lightbox-overlay.tc-lightbox-open {
    display: flex;
    opacity: 1;
}

.tc-lightbox-inner {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.tc-lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    transform: scale(0.94);
    transition: transform 0.22s ease;
    touch-action: pinch-zoom;
}

.tc-lightbox-overlay.tc-lightbox-open .tc-lightbox-img {
    transform: scale(1);
}

.tc-lightbox-close {
    position: fixed;
    top: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    z-index: 100000;
}

.tc-lightbox-close:hover,
.tc-lightbox-close:focus {
    background: rgba(255, 255, 255, 0.3);
    outline: none;
}

body.tc-lightbox-body-lock {
    overflow: hidden;
}

/* =========================================================================
   EVENTS-LIST SHORTCODES (.tel-wrapper)
   ========================================================================= */
.tel-wrapper {
    font-family: var(--tc-font);
    max-width: 860px;
    margin: 0 auto;
    background: var(--tc-surface);
    color: var(--tc-ink);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-shadow);
    overflow: hidden;
}

.tel-period-heading,
.tel-year-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px 16px;
    background: var(--tc-grad);
    color: #fff;
}

.tel-period-label,
.tel-year-display {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.tel-year-display {
    min-width: 60px;
}

.tel-year-prev,
.tel-year-next {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.tel-year-prev:hover,
.tel-year-next:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* ---- Category tabs ---- */
.tel-tabs {
    display: flex;
    flex-wrap: wrap;
    background: var(--tc-surface-2);
    border-bottom: 1px solid var(--tc-line);
}

.tel-tab {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--tc-muted);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.tel-tab:hover {
    background: rgba(0, 0, 0, 0.03);
    color: var(--tc-ink);
}

.tel-tab-active {
    color: var(--tc-accent);
    border-bottom-color: var(--tc-accent);
    background: var(--tc-surface);
}

.tel-tab-emoji {
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1;
}

.tel-tab-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.tel-tab-label-ta {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.tel-tab-label-en {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tel-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    border-radius: 999px;
    background: var(--tc-line);
    color: var(--tc-muted);
    font-size: 11px;
    font-weight: 700;
}

.tel-tab-active .tel-tab-count {
    background: var(--tc-accent);
    color: #fff;
}

/* ---- Tab panels (JS toggles .tel-panel-active) ---- */
.tel-panel {
    display: none;
    padding: 0 0 16px;
}

.tel-panel-active {
    display: block;
}

.tel-month-section {
    margin: 0;
}

.tel-month-heading {
    margin: 0;
    padding: 10px 16px 8px;
    background: var(--tc-surface-2);
    border-bottom: 1px solid var(--tc-line);
    color: var(--tc-accent);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ---- Event rows ---- */
.tel-event-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--tc-line);
    border-left: 3px solid transparent;
    transition: background 0.15s ease;
}

.tel-event-row:hover {
    background: var(--tc-surface-2);
}

.tel-event-row:last-child {
    border-bottom: none;
}

.tel-type-festival   { border-left-color: #c41e3a; }
.tel-type-holiday    { border-left-color: #28a745; }
.tel-type-religious  { border-left-color: #e67e22; }
.tel-type-auspicious { border-left-color: #0056b3; }
.tel-type-tithi      { border-left-color: #6f42c1; }
.tel-type-cultural   { border-left-color: #20c997; }
.tel-type-other      { border-left-color: #6c757d; }

/* Past events: keep icons/badge fully visible, only mute the text */
.tel-past .tel-name-en,
.tel-past .tel-name-ta {
    color: #9aa0aa;
}

.tel-past .tel-date-badge {
    background: #b9bdc7;
}

.tel-today-row {
    background: #fff8e1;
    border-left-color: #ffc107 !important;
}

.tel-date-badge {
    flex-shrink: 0;
    width: 48px;
    padding: 5px 4px;
    border-radius: 8px;
    background: var(--tc-grad);
    color: #fff;
    text-align: center;
    line-height: 1.2;
}

.tel-day {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

.tel-month-abbr {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.tel-event-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.tel-emoji {
    flex-shrink: 0;
    font-size: 20px;
}

.tel-names {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tel-name-en {
    font-size: 14px;
    font-weight: 600;
    color: var(--tc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tel-name-ta {
    margin-top: 1px;
    font-size: 12px;
    color: var(--tc-muted);
}

.tel-no-data,
.tel-loading {
    padding: 28px;
    text-align: center;
    color: var(--tc-muted);
}

.tel-loading {
    font-style: italic;
}

/* =========================================================================
   DESKTOP (≥769px): single column — month grid full-width, the daily
   "almanac sheet" on its own full-width row below it (the side-by-side
   grid clipped the month and cramped the rich sheet).
   ========================================================================= */
@media (min-width: 769px) {
    .tc-day {
        min-height: 92px;
        padding: 9px;
    }

    /* Roomier cells: show the 3rd emoji and the event name */
    .tc-events-indicator .tc-event-emoji:nth-child(3) {
        display: inline;
    }
    .tc-event-name {
        display: block;
    }

    /* Sheet is readable, not absurdly wide on big monitors */
    .tc-daily-panel-body {
        max-width: 760px;
        margin: 0 auto;
    }
}

/* =========================================================================
   SMALL PHONES (≤576px): tighten events-list type scale
   ========================================================================= */
@media (max-width: 576px) {
    .tel-tab {
        justify-content: center;
        padding: 9px 8px;
    }
    .tel-tab-label {
        align-items: center;
    }
    .tel-tab-label-ta { font-size: 12px; }
    .tel-tab-label-en { font-size: 9px; }
    .tel-date-badge   { width: 40px; }
    .tel-day          { font-size: 16px; }
    .tel-name-en      { font-size: 13px; }
    .tel-name-ta      { font-size: 11px; }
    .tel-emoji        { font-size: 17px; }
}

/* =========================================================================
   PHONES (≤600px): full 7-column grid kept readable via horizontal scroll
   (cells ~90px) instead of being shrunk to an illegible width. The weekday
   header and the date grid share one scroll container (.tc-calendar) and the
   same min-width, so they scroll together and stay column-aligned. Month
   navigation here is via the header ◄ ► buttons (swipe is disabled in JS so
   horizontal drag scrolls instead).
   ========================================================================= */
@media (max-width: 600px) {
    .tamil-calendar-wrapper {
        --tc-gap: 4px;
    }

    .tc-calendar {
        padding: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
    }

    .tc-weekdays,
    .tc-dates-grid {
        min-width: 640px;
    }

    .tc-day {
        min-height: clamp(58px, 16vw, 72px);
        padding: 6px;
        scroll-snap-align: start;
    }
}

/* =========================================================================
   ACCESSIBILITY
   ========================================================================= */
.tc-day:focus-visible,
.tc-nav-prev:focus-visible,
.tc-nav-next:focus-visible,
.tc-today:focus-visible,
.tc-day-prev:focus-visible,
.tc-day-next:focus-visible,
.tel-tab:focus-visible,
.tel-year-prev:focus-visible,
.tel-year-next:focus-visible {
    outline: 2px solid var(--tc-accent);
    outline-offset: 2px;
}

@media (prefers-contrast: high) {
    .tc-day-today {
        border: 3px solid #000;
    }
    .tc-day-gregorian {
        font-weight: 700;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tamil-calendar-wrapper *,
    .tel-wrapper *,
    .tc-lightbox-overlay,
    .tc-lightbox-img {
        transition: none !important;
        animation: none !important;
    }
}

@media print {
    .tc-nav-prev,
    .tc-nav-next,
    .tc-today,
    .tc-day-prev,
    .tc-day-next,
    .tc-lightbox-overlay {
        display: none !important;
    }
    .tamil-calendar-wrapper,
    .tel-wrapper {
        box-shadow: none;
        border: 0;
    }
    .tc-day {
        min-height: 50px;
    }
}

/* =========================================================================
   DARK MODE (OS preference) — re-point tokens so it themes coherently
   ========================================================================= */
@media (prefers-color-scheme: dark) {
    .tamil-calendar-wrapper,
    .tel-wrapper {
        --tc-ink: #e6e8ec;
        --tc-muted: #9aa3b2;
        --tc-line: #2c313c;
        --tc-surface: #1c2027;
        --tc-surface-2: #14171d;
        --tc-weekend: #20252e;
        --tc-tint: #2a1f24;
        --tc-tint-line: #4a2f38;
        --tc-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
        --tc-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    }

    .tc-day-selected:not(.tc-day-today) {
        background: var(--tc-tint);
    }

    /* DB category colours are a light palette — on dark, drop the tinted
       fill but keep the coloured left-border as the category cue. */
    .tc-day.tc-has-cat:not(.tc-day-today):not(.tc-day-selected) {
        background: var(--tc-surface);
    }

    .tc-event-item {
        color: #f0a8b6;
    }

    .tel-today-row {
        background: #2e2a16;
    }
}

/* ---- Location picker + computed (Drik) panchangam in the day panel ---- */
.tc-place-picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius-sm, 8px);
    background: var(--tc-surface, #fff);
}
.tc-place-label { font-size: 16px; line-height: 1; }
.tc-place-picker select {
    flex: 1 1 140px;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid var(--tc-line);
    border-radius: 6px;
    background: var(--tc-surface, #fff);
    color: var(--tc-ink, #1f2937);
    font: inherit;
}
@media (max-width: 480px) {
    .tc-place-picker select { flex-basis: 100%; }
}

/* (.tc-pc-* base styles superseded by the .tc-sheet-grp shared rules) */

[data-theme="dark"] .tc-place-picker,
[data-theme="dark"] .tc-place-picker select { background: var(--tc-surface, #1c2027); }