/*
Theme Name: TamilCalendar.in
Theme URI: https://tamilcalendar.in
Author: DailyWorks
Description: Tamil-first, calendar-first theme for tamilcalendar.in. Ships zero external assets — system font stack, inline SVG marks, one stylesheet, eleven lines of JS — because this host sits directly on its origin with no CDN in front of it.
Version: 2.0.0
Requires PHP: 8.1
Text Domain: tcin
*/

/* ==================================================================
   Tokens
   ------------------------------------------------------------------
   No Google Fonts. A Tamil webfont is 300-500KB for glyph coverage
   this audience's devices already ship, and every byte here is paid
   over a full round trip to an Indian origin with no CDN.
   ================================================================== */
:root {
  /* TC.in brand tokens, frozen 2026-09-20. The first three are IMMUTABLE:
     TC Red #A61B1B, TC Ivory #FFFDF7, TC Charcoal #24211E.
     Identity is Ivory + Tamil Red + Charcoal; saffron and gold are emphasis
     only. Deliberately NOT #FF0000 + #FFFF00 + orange: that resembles printed
     calendars but destroys hierarchy on screen and makes badges, timing states
     and navigation compete with each other. */
  --ink:        #24211E;
  --ink-soft:   #6B625A;
  --ink-faint:  #9A9088;
  --line:       #E8E1D8;
  --line-soft:  #F3EEE6;

  /* page vs surface are distinct: the PAGE is warm ivory, CARDS are white.
     Collapsing them is what makes an ivory design look flat. */
  --page:       #FFFDF7;
  --bg:         #FFFFFF;
  --bg-soft:    #FFF7E6;

  --accent:     #A61B1B;
  --accent-ink: #861616;
  --accent-bg:  #FFF7E6;
  --accent-line:#E8D9C4;
  --saffron:    #D97706;
  --gold:       #B8860B;

  /* Semantic. Used as dots, badges and thin borders -- never as large coloured
     panels, and never to paint a whole calendar cell. */
  --good:       #287A4B;
  --warn:       #B45309;
  --danger:     #A61B1B;
  --info:       #3567A8;
  --viratha:    #7C3A8C;

  --max: 58rem;
  --radius: 12px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(36,33,30,.05), 0 6px 20px -12px rgba(36,33,30,.22);

  --font: "Noto Sans Tamil", "Latha", "Nirmala UI", "Tamil Sangam MN",
          system-ui, -apple-system, "Segoe UI", sans-serif;
  --num: "Noto Sans Tamil", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #F7F1E8;
    --ink-soft:   #BDB4AA;
    --ink-faint:  #8C847C;
    --line:       #332E29;
    --line-soft:  #262220;
    --page:       #171513;
    --bg:         #211E1B;
    --bg-soft:    #2A2521;
    --accent:     #E35D5D;
    --accent-ink: #F08585;
    --accent-bg:  #2A1E1E;
    --accent-line:#4A3230;
    --saffron:    #F0A33A;
  }
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  /* Tamil needs more leading than Latin: ascenders and the kombu/kaal marks
     collide at the 1.5 that reads fine in English. */
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3 { line-height: 1.34; font-weight: 700; }

.tcin-wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.15rem; }
.tcin-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.tcin-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.tcin-skip:focus { left: 0; }

/* ---------------- gate banner ---------------- */
.tcin-gate {
  background: var(--accent-bg); border-bottom: 1px solid var(--accent-line);
  color: var(--accent-ink); font-size: .8rem; text-align: center;
  padding: .4rem 1rem; line-height: 1.5;
}
.tcin-gate-ref { opacity: .65; font-variant-numeric: tabular-nums; }

/* ---------------- header ---------------- */
.tcin-head {
  background: var(--bg); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.tcin-head .tcin-wrap {
  display: flex; align-items: center; gap: .75rem;
  padding-top: .7rem; padding-bottom: .7rem;
}
.tcin-brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); }
.tcin-brand:hover { text-decoration: none; }
.tcin-logo { flex: none; display: block; width: 32px; height: 32px; }
/* The mark is a raster served at 2x; pin the box so a slow load cannot
   reflow the header, which is the first thing above the fold. */
.tcin-brand-text { font-size: 1.08rem; font-weight: 700; line-height: 1.25; }
.tcin-brand-text small {
  display: block; font-size: .68rem; font-weight: 400; letter-spacing: .04em;
  color: var(--ink-faint); text-transform: uppercase;
}

.tcin-nav { margin-inline-start: auto; display: flex; gap: 1.15rem; font-size: .94rem; }
.tcin-nav a { color: var(--ink-soft); white-space: nowrap; }
.tcin-nav a:hover { color: var(--accent); }
.tcin-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

.tcin-menu-btn {
  display: none; margin-inline-start: auto; background: none; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .5rem .55rem; cursor: pointer;
}
.tcin-menu-btn span {
  display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
}
.tcin-menu-btn span + span { margin-top: 4px; }

@media (max-width: 43rem) {
  .tcin-menu-btn { display: block; }
  .tcin-nav {
    display: none; order: 3; width: 100%; margin: 0;
    flex-direction: column; gap: 0; border-top: 1px solid var(--line);
    padding-top: .3rem;
  }
  .tcin-nav.is-open { display: flex; }
  .tcin-nav a { padding: .55rem 0; border-bottom: 1px solid var(--line-soft); }
}

/* ---------------- page furniture ---------------- */
main { padding: 1.5rem 0 3rem; }
.tcin-h1 { font-size: 1.72rem; margin: .1rem 0 .35rem; letter-spacing: -.01em; }
.tcin-sub { color: var(--ink-soft); margin: 0 0 1.35rem; }

.tcin-crumbs { font-size: .82rem; color: var(--ink-faint); margin-bottom: .85rem; }
.tcin-crumbs a { color: var(--ink-soft); }
.tcin-crumbs .sep { margin: 0 .35rem; }

/* ---------------- the day page ---------------- */
.tcin-day > h1 { margin-bottom: .1rem; }

.tcin-panel {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); box-shadow: var(--shadow);
  padding: .1rem 1.15rem 1.15rem; margin: 1.15rem 0;
}
.tcin-panel h2 {
  font-size: .8rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint); margin: 1.15rem 0 .5rem; font-weight: 600;
}

.tcin-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 0 1.6rem; margin: 0; }
.tcin-dl > div { border-top: 1px solid var(--line-soft); padding: .5rem 0; }
.tcin-dl dt { font-size: .8rem; color: var(--ink-soft); margin-bottom: .1rem; }
.tcin-dl dd { margin: 0; font-weight: 600; font-size: 1.02rem; }
.tcin-dl dd small { font-weight: 400; font-size: .82rem; color: var(--ink-faint); margin-inline-start: .25rem; }

.tcin-windows { list-style: none; margin: 0; padding: 0; }
.tcin-windows li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  border-top: 1px solid var(--line-soft); padding: .5rem 0;
}
.tcin-windows time { font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--good); white-space: nowrap; }
.tcin-panel--avoid .tcin-dl dd { color: var(--danger); }

.tcin-events {
  border: 1px solid var(--accent-line); background: var(--accent-bg);
  border-radius: var(--radius); padding: .1rem 1.15rem 1rem; margin: 1.15rem 0;
}
.tcin-events h2 { color: var(--accent-ink); }
.tcin-events ul { margin: .3rem 0 .2rem; padding-inline-start: 1.15rem; }
.tcin-events li { margin: .2rem 0; font-weight: 600; }
.tcin-events .en { color: var(--ink-soft); font-weight: 400; font-size: .86rem; }

/* ---------------- tables ---------------- */
.tcin-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0; }
.tcin-month, .tcin-list { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tcin-month th, .tcin-list th {
  text-align: start; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; border-bottom: 1px solid var(--line);
  padding: .45rem .55rem; white-space: nowrap;
}
.tcin-month td, .tcin-list td { border-bottom: 1px solid var(--line-soft); padding: .5rem .55rem; vertical-align: top; }
.tcin-month td:first-child { width: 3.4rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.tcin-month tr:hover td, .tcin-list tr:hover td { background: var(--bg-soft); }
.tcin-list tr.upcoming td { background: var(--accent-bg); }
.tcin-list tr.upcoming td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* ---------------- grids, cards, chips ---------------- */
.tcin-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .55rem; margin: .8rem 0 0; padding: 0; }
.tcin-grid a {
  display: block; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .65rem .75rem; font-weight: 600; color: var(--ink); background: var(--bg);
}
.tcin-grid a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.tcin-grid small { display: block; font-weight: 400; font-size: .7rem; color: var(--ink-faint); text-transform: capitalize; }

.tcin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .7rem; margin: 1.2rem 0; }
.tcin-card {
  display: block; border: 1px solid var(--line); border-radius: var(--radius);
  padding: .85rem 1rem; background: var(--bg); color: var(--ink);
}
.tcin-card:hover { border-color: var(--accent); text-decoration: none; }
.tcin-card strong { display: block; color: var(--accent); }
.tcin-card span { font-size: .85rem; color: var(--ink-soft); }

.tcin-inline { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem .55rem; padding: 0; margin: .5rem 0 0; }
.tcin-inline li a, .tcin-hits li a {
  display: inline-block; border: 1px solid var(--line); border-radius: 999px;
  padding: .2rem .7rem; font-size: .9rem; color: var(--ink-soft);
}
.tcin-inline li a:hover, .tcin-hits li a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.tcin-hits { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; }

/* ---------------- prev / next ---------------- */
.tcin-daynav {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: .6rem; margin-top: 1.8rem; padding-top: 1rem;
  border-top: 1px solid var(--line); font-size: .94rem;
}
.tcin-daynav .up { font-weight: 700; color: var(--ink); }
.tcin-daynav .prev, .tcin-daynav .next { color: var(--ink-soft); }
.tcin-daynav a:hover { color: var(--accent); }

.tcin-pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 1.6rem 0 0; }
.tcin-pagination a, .tcin-pagination span {
  display: inline-block; padding: .3rem .7rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: .92rem;
}
.tcin-pagination .current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------------- editorial ---------------- */
.tcin-prose { max-width: 40rem; }
.tcin-body > * + * { margin-top: 1.05rem; }
.tcin-body h2 { font-size: 1.24rem; margin-top: 2rem; }
.tcin-body h3 { font-size: 1.06rem; margin-top: 1.6rem; }
.tcin-body ul, .tcin-body ol { padding-inline-start: 1.3rem; }
.tcin-body li + li { margin-top: .35rem; }
.tcin-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.tcin-body blockquote {
  margin: 1.3rem 0; padding: .1rem 0 .1rem 1rem;
  border-inline-start: 3px solid var(--accent-line); color: var(--ink-soft);
}
.tcin-body code { background: var(--bg-soft); padding: .1rem .35rem; border-radius: 4px; font-size: .9em; }

.tcin-postlist { display: grid; gap: .9rem; }
.tcin-post-card { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.1rem; background: var(--bg); }
.tcin-post-card h2 { font-size: 1.12rem; margin: 0 0 .2rem; }
.tcin-post-card p { margin: .3rem 0 0; color: var(--ink-soft); font-size: .94rem; }
.tcin-post-meta { font-size: .8rem !important; color: var(--ink-faint) !important; }

/* ---------------- search ---------------- */
.tcin-search { display: flex; gap: .45rem; margin: 1rem 0 1.6rem; max-width: 28rem; }
.tcin-search input {
  flex: 1; font: inherit; font-size: .95rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .5rem .7rem;
}
.tcin-search button {
  font: inherit; font-size: .95rem; cursor: pointer; color: #fff; background: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: .5rem 1rem;
}

/* ---------------- states ---------------- */
.tcin-unavailable {
  background: var(--bg-soft); border: 1px dashed var(--line);
  border-radius: var(--radius-sm); color: var(--ink-soft); padding: .85rem 1.05rem;
}
.tcin-more { margin-top: 1.5rem; font-weight: 600; }

/* ---------------- footer ---------------- */
.tcin-foot { border-top: 1px solid var(--line); background: var(--bg-soft); color: var(--ink-soft); font-size: .9rem; }
.tcin-foot .tcin-wrap {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.4rem; padding-top: 1.8rem; padding-bottom: 2.4rem;
}
.tcin-foot h2 { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .5rem; }
.tcin-foot ul { list-style: none; margin: 0; padding: 0; }
.tcin-foot li { margin: .22rem 0; }
.tcin-foot a { color: var(--ink-soft); }
.tcin-foot a:hover { color: var(--accent); }
.tcin-foot-note { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.tcin-foot-note p { margin: .3rem 0; }
.tcin-source { font-size: .82rem; color: var(--ink-faint); }
.tcin-copy { font-size: .82rem; color: var(--ink-faint); }

/* ---------------- print ----------------
   A day page is a thing people print and pin up. Drop the chrome, keep the
   panchangam, and never print a URL the reader cannot click. */
@media print {
  .tcin-head, .tcin-foot, .tcin-gate, .tcin-daynav, .tcin-skip,
  .tcin-search, .tcin-pagination, .tcin-inline, .tcin-menu-btn { display: none !important; }
  body { font-size: 12pt; line-height: 1.5; color: #000; background: #fff; }
  main { padding: 0; }
  .tcin-panel, .tcin-events { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  .tcin-windows time { color: #000; }
  a { color: #000; text-decoration: none; }
}

/* ==================================================================
   TODAY — the hero-date homepage (TCIN-TODAY-001, 2026-09-20)
   Mobile-first. The date itself is the hero: no logo wall, no intro
   paragraph, no banner above it. The large numeral in TC Red is the
   product's visual signature.
   Homepage rule: ANSWER + PREVIEW. Every block gives the value and a
   link; the destination page carries the explanation. This is what
   stops Today growing into a single enormous page.
   ================================================================== */
.tcin-hero {
  text-align: center;
  padding: 1.6rem 1rem 1.2rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0 0 1rem;
}
.tcin-hero-kicker {
  margin: 0; font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.tcin-hero-date { margin: .2rem 0 0; display: block; line-height: 1; }
.tcin-hero-day {
  display: block; font-family: var(--num);
  font-size: clamp(3.6rem, 18vw, 5.4rem); font-weight: 800;
  color: var(--accent); letter-spacing: -.02em;
}
.tcin-hero-mon {
  display: block; margin-top: .25rem;
  font-size: clamp(1.05rem, 4.5vw, 1.3rem); font-weight: 600; color: var(--ink);
}
.tcin-hero-wd { margin: .35rem 0 0; color: var(--ink-soft); font-size: .95rem; }
.tcin-hero-tamil {
  display: inline-block; margin: .7rem 0 0; padding: .35rem .8rem;
  background: var(--accent-bg); border: 1px solid var(--accent-line);
  border-radius: 999px; color: var(--accent-ink); font-weight: 600;
}
.tcin-hero-year { font-weight: 400; color: var(--ink-soft); }
.tcin-hero-nav {
  display: flex; gap: .4rem; justify-content: center;
  margin-top: 1rem; flex-wrap: wrap;
}
.tcin-hero-nav a {
  padding: .45rem .7rem; border: 1px solid var(--line);
  border-radius: 999px; font-size: .85rem; color: var(--ink-soft);
  white-space: nowrap;
}
/* The three controls must sit on ONE row at 375px. They wrapped to two rows on
   first build, which pushed the fold past the timings and undid the point of a
   one-thumb layout. */
@media (max-width: 24rem) {
  .tcin-hero-nav { gap: .3rem; flex-wrap: nowrap; }
  .tcin-hero-nav a { padding: .45rem .55rem; font-size: .8rem; }
}
.tcin-hero-nav a:hover { border-color: var(--accent-line); color: var(--accent); text-decoration: none; }
.tcin-hero-nav a.is-today {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}

.tcin-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
.tcin-fact {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .6rem .5rem; text-align: center; min-width: 0;
}
.tcin-fact-k { display: block; font-size: .72rem; color: var(--ink-soft); }
.tcin-fact-v { display: block; margin-top: .2rem; font-weight: 600; font-size: .92rem;
               overflow-wrap: anywhere; }

.tcin-block {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem 1rem; margin: 0 0 1rem;
}
.tcin-block > h2 { margin: 0 0 .6rem; font-size: 1rem; }
.tcin-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.tcin-block-head h2 { margin: 0 0 .6rem; font-size: 1rem; }
.tcin-block-head a { font-size: .85rem; white-space: nowrap; }

/* Neutral rows with a small semantic dot. NOT a green panel for auspicious
   times and a red one for inauspicious -- that judges far too loudly. */
.tcin-times { display: grid; gap: .1rem; }
.tcin-time { display: flex; align-items: center; gap: .55rem; padding: .5rem 0; border-bottom: 1px solid var(--line-soft); }
.tcin-time:last-child { border-bottom: 0; }
.tcin-time-k { flex: 1; color: var(--ink-soft); font-size: .92rem; }
.tcin-time-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.tcin-dot { width: .5rem; height: .5rem; border-radius: 50%; flex: none; display: inline-block; }
.tcin-good { background: var(--good); }
.tcin-warn { background: var(--warn); }
.tcin-mark { background: var(--accent); }

.tcin-none { margin: 0; color: var(--ink-soft); }
.tcin-special { margin: 0; padding-left: 1.1rem; }

.tcin-next { list-style: none; margin: 0; padding: 0; }
.tcin-next li { border-bottom: 1px solid var(--line-soft); }
.tcin-next li:last-child { border-bottom: 0; }
.tcin-next a { display: flex; align-items: baseline; gap: .6rem; padding: .55rem 0; color: inherit; }
.tcin-next a:hover { text-decoration: none; }
.tcin-next a:hover .tcin-next-n { color: var(--accent); }
.tcin-next-d { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tcin-next-n { flex: 1; }
.tcin-next-in { font-size: .78rem; color: var(--ink-faint); white-space: nowrap; }
/* At 375px the three columns do not fit on one line and "இன்னும் 3 நாட்கள்"
   was clipped at the right edge. Stack the countdown under the name rather
   than truncating it -- a cut-off number is worse than a second line. */
@media (max-width: 26rem) {
  .tcin-next a { flex-wrap: wrap; row-gap: .1rem; }
  .tcin-next-n { flex: 1 1 auto; min-width: 0; }
  .tcin-next-in { flex: 1 0 100%; }
}

/* Month preview: a dot UNDER the numeral. Never a coloured cell -- a filled
   cell reads as a state the calendar is not asserting. */
.tcin-mini { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tcin-mini th { font-size: .72rem; font-weight: 500; color: var(--ink-faint); padding: .2rem 0; }
.tcin-mini td { text-align: center; padding: 0; }
.tcin-mini td a {
  display: block; padding: .38rem 0 .5rem; color: var(--ink);
  border-radius: var(--radius-sm); position: relative; font-variant-numeric: tabular-nums;
}
.tcin-mini td a:hover { background: var(--bg-soft); text-decoration: none; }
.tcin-mini td.is-today a { background: var(--accent); color: #fff; font-weight: 700; }
.tcin-mini td.is-today a .tcin-dot { background: #fff; }
.tcin-mini .tcin-dot { position: absolute; left: 50%; transform: translateX(-50%); bottom: .18rem; width: .3rem; height: .3rem; }
.tcin-legend { margin: .6rem 0 0; font-size: .8rem; color: var(--ink-soft); display: flex; align-items: center; gap: .35rem; }

.tcin-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.tcin-chips a {
  display: inline-block; padding: .35rem .7rem; border: 1px solid var(--line);
  border-radius: 999px; font-size: .88rem; color: var(--ink-soft);
}
.tcin-chips a:hover { border-color: var(--accent-line); color: var(--accent); text-decoration: none; }

@media (min-width: 40rem) {
  .tcin-hero { padding: 2.2rem 1rem 1.6rem; }
  .tcin-times { grid-template-columns: 1fr 1fr; gap: 0 1.4rem; }
}

/* ---- Festival calendar (TCIN-FESTIVAL-CALENDAR-001) ----------------
   Classification is shown as a small LABEL beside the name, never as a
   coloured row. The three sections overlap -- a day can be a festival and
   a government holiday -- so a row may carry more than one tag, and a
   painted row could only ever show one of them. */
.tcin-fest { list-style: none; margin: 0; padding: 0; }
.tcin-fest li {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .55rem;
  padding: .5rem 0; border-bottom: 1px solid var(--line-soft);
}
.tcin-fest li:last-child { border-bottom: 0; }
.tcin-fest li.is-today .tcin-fest-n { font-weight: 700; color: var(--accent); }
.tcin-fest-d { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tcin-fest-wd { font-size: .78rem; color: var(--ink-faint); white-space: nowrap; }
.tcin-fest-n { flex: 1 1 8rem; min-width: 0; }
.tcin-fest-next { margin: 0; line-height: 1.7; }

.tcin-tag {
  display: inline-block; font-size: .68rem; line-height: 1.5;
  padding: .05rem .42rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid; margin-left: .15rem;
}
.tcin-tag-fest { color: var(--accent);   border-color: var(--accent-line); background: var(--accent-bg); }
.tcin-tag-govt { color: var(--info);     border-color: #cbd9ec; background: #f2f6fc; }
.tcin-tag-bank { color: var(--ink-soft); border-color: var(--line);       background: var(--bg-soft); }

.tcin-monthnav { margin-bottom: 1rem; }
.tcin-monthnav a { font-size: .84rem; }

@media (prefers-color-scheme: dark) {
  .tcin-tag-govt { border-color: #2b3a4d; background: #1a2230; }
}

/* ---- Digital Calendar (TCIN-DIGITAL-CALENDAR-001) ------------------
   The primary action is TC Red. Google/Apple branding belongs at the
   export destination, not on the button that starts the journey. */
.tcin-cta { margin: 1rem 0 0; }
.tcin-cta-btn {
  display: inline-block; padding: .6rem 1.1rem; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: .95rem;
  border: 1px solid var(--accent); cursor: pointer; font-family: inherit;
}
.tcin-cta-btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); text-decoration: none; color: #fff; }
.tcin-cta-alt { background: var(--bg); color: var(--accent); }
.tcin-cta-alt:hover { background: var(--accent-bg); color: var(--accent-ink); }

.tcin-dc-form fieldset {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem 1rem; margin: 0 0 1rem; background: var(--bg);
}
.tcin-dc-form legend { padding: 0 .4rem; font-weight: 600; font-size: .92rem; }
.tcin-dc-list { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .8rem; }
.tcin-dc-list label { display: flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .92rem; }
.tcin-dc-list input { accent-color: var(--accent); flex: none; }
.tcin-code {
  display: block; margin-top: .3rem; padding: .5rem .6rem; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: .78rem; word-break: break-all; font-family: ui-monospace, monospace;
}
@media (min-width: 40rem) {
  .tcin-dc-list { grid-template-columns: repeat(3, 1fr); }
}

/* TCIN-HISTORICAL-CALENDAR-DISCOVERY-001 — year/month discovery block.
   Reuses .tcin-chips so the treatment is a navigation change, not a visual
   redesign: anything that also altered the page's look would confound what
   the experiment is measuring. */
.tcin-disc-years { margin-bottom: .55rem; }
.tcin-disc-years a { font-weight: 600; }
.tcin-disc-months a.is-current {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* Event badges. Sized to the same 17-22px band tamilcalendar.com uses, because
   the artwork was accepted at that size and nothing larger was validated.
   list-style is removed only on rows that actually HAVE an icon, so a row
   without one keeps its bullet rather than losing its marker silently. */
.tcin-events li.has-icon {
  list-style: none;
  margin-inline-start: -1.15rem;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.tcin-event-icon {
  width: clamp(17px, 2.8vw, 22px);
  height: clamp(17px, 2.8vw, 22px);
  object-fit: contain;
  flex-shrink: 0;
}
/* Non-deity events show the emoji symbol, exactly as tamilcalendar.com's chip
   does — it renders the symbol and discards the icon for these. Sized to the
   same 17-22px band so the two brands line up. */
.tcin-event-symbol {
  font-size: clamp(17px, 2.8vw, 22px);
  line-height: 1;
  flex-shrink: 0;
}
/* The 42px slot, same as tamilcalendar.com's .event-badge-deity: deity-mapped
   events carry illustration, everything else the flat mark. Two slots, two
   kinds of art — the owner ruling this file's sizes come from. */
.tcin-event-deity {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}