/* TMC-148: home page parts from the PO's home-v18 mockup / final screenshot — the date card (‹ date ›, நேற்று /
   இன்று / நாளை, காலண்டர் | அட்டவணை), the day as a table, and the month's special days. */

/* ---------- date card: the monthly calendar's day-cell rose (#FCF0F0) as its background ---------- */
/* Date card, view switch, table and month list: the calendar sheet's width (760px on desktop, the full width
   less the same side padding on phones), centred, so their edges line up. */
.hm-dbar,.hm-sheet,.hm-month{box-sizing:border-box; width:100%; max-width:760px; margin-left:auto; margin-right:auto}
/* a smaller gap from the switch to the sheet than the page's section gap */
.hm-top{margin-bottom:14px}
.hm-dbar{background:#FCF0F0; border:1px solid #F3DCDC; border-radius:14px; padding:10px 12px}
.hm-dnav{display:flex; align-items:center; gap:8px}
.hm-arrow{flex:0 0 auto; width:42px; height:42px; border-radius:10px; border:1px solid #F3DCDC; background:#fff; color:#B55D00;
  font-size:24px; line-height:1; display:grid; place-items:center; cursor:pointer}
.hm-arrow:hover{background:#FFF1E2}
.hm-dbox{position:relative; flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px;
  background:#fff; border:1px solid #F3DCDC; border-radius:10px; padding:4px 10px; cursor:pointer}
.hm-dbox .hm-cal{flex:0 0 auto; width:18px; height:18px; fill:none; stroke:#B55D00; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.hm-dtext{display:flex; flex-direction:column; align-items:center; min-width:0; line-height:1.35; text-align:center}
.hm-dtext b{font-size:15px; font-weight:700; color:#2B2524; white-space:nowrap}
/* the native date picker lies over the box, invisible, so a tap opens it */
.hm-dbox input[type=date]{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0}
.hm-dbox input[type=date]::-webkit-calendar-picker-indicator{position:absolute; inset:0; width:100%; height:100%; cursor:pointer}
.hm-drow{display:flex; justify-content:center; margin-top:10px}
.hm-rel{display:flex; gap:4px}
.hm-rel button{border:0; background:none; padding:5px 14px; border-radius:999px; font-size:15px; font-weight:600; color:#35343D; cursor:pointer}
.hm-rel button[aria-pressed="true"]{background:#FF7700; color:#fff}
.hm-views{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:10px; color:#C9BEB3; font-size:15px}
.hm-views button{border:0; background:none; padding:4px 2px; font-weight:600; color:#A39A93; cursor:pointer; border-bottom:2px solid transparent}
.hm-views button[aria-pressed="true"]{color:#B55D00; border-bottom-color:#FF7700}
.hm-views button:focus{outline:none}
/* desktop: ‹ date › and the days centred in the card */
@media (min-width:1024px){
  .hm-dnav{justify-content:center}
  .hm-dbox{flex:0 1 440px}
  /* the view switch under the card, at its right edge */
  .hm-views{max-width:760px; margin-left:auto; margin-right:auto; justify-content:flex-end}
}
.hm-views button:focus-visible{outline:2px solid #FDBA74; outline-offset:2px; border-radius:4px}
@media (max-width:359px){
  .hm-arrow{width:36px; height:38px}
  .hm-dtext b{font-size:13.5px}
  .hm-dbox .hm-cal{display:none}
}

/* காலண்டர் hidden while அட்டவணை is shown (kept in the page so its picture is still made) */
.hm-collapsed{height:0; overflow:hidden; margin-top:0 !important; margin-bottom:0 !important; background:none !important}

/* ---------- the day as a table ---------- */
.hm-sheet{border:1px solid #EBCDB2; border-radius:18px; overflow:hidden; background:#fff; color:#2B2524}
.hm-shead{display:flex; align-items:center; justify-content:space-between; gap:10px; background:#EFCDAA; padding:12px 16px}
.hm-sday{display:flex; align-items:center; gap:10px}
.hm-sday > b{font-size:44px; line-height:1; font-weight:700; color:#B45309}
.hm-sday span{display:flex; flex-direction:column; line-height:1.3}
.hm-sday strong{font-size:16px}
.hm-sday small{font-size:13px; color:#6B6259; white-space:nowrap}
.hm-shead p{font-size:14px; font-weight:600; text-align:right}
.hm-trio{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #EFE2D5}
.hm-trio > div{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; padding:10px 6px; line-height:1.4}
.hm-trio > div + div{border-left:1px solid #EFE2D5}
.hm-trio small{font-size:12.5px; color:#6B6259}
.hm-trio b{font-size:17px; font-weight:700}
.hm-trio span{font-size:12px; color:#6B6259}
.hm-tdate{background:#EAF5EE}
.hm-tdate b{color:#1E7B3C}
.hm-red{color:#C0392B}
.hm-green{color:#1E7B3C}
.hm-sun{border-top:1px solid #EFE2D5; padding:8px 16px}
.hm-sun p{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14.5px; line-height:1.9}
.hm-sun p > span{display:flex; align-items:center; gap:8px}
.hm-sun b{font-weight:700}
.hm-sun b small{font-weight:400; color:#6B6259; margin-left:4px}
.hm-sunic,.hm-moon{display:inline-block; width:12px; height:12px; flex:0 0 auto}
.hm-sunic{border-radius:50%; box-shadow:0 0 0 2px #fff inset; background:radial-gradient(circle,#E5772A 35%,transparent 38%), repeating-conic-gradient(#E5772A 0 10deg,transparent 10deg 45deg)}
.hm-moon{border-radius:50%; box-shadow:inset -4px 0 0 0 #E5772A}
.hm-times{border-top:1px solid #EFE2D5; display:grid; grid-template-columns:1fr}
.hm-times h3{font-size:13.5px; font-weight:700; text-align:center; padding:6px 4px; margin:0}
.hm-good{display:grid; grid-template-columns:1fr 1fr}
.hm-good > div + div,.hm-bad > div + div{border-left:1px solid #EFE2D5}
.hm-good h3{background:#E3F2E8; color:#1E7B3C}
.hm-good p{display:flex; flex-direction:column; align-items:center; line-height:1.4; padding:4px 6px}
.hm-good p small{font-size:12.5px; color:#6B6259}
.hm-good p b{font-size:15.5px; font-weight:700; white-space:nowrap}
.hm-good > div{padding-bottom:6px}
.hm-bad{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #EFE2D5}
.hm-bad h3{background:#F7DEDA; color:#C0392B}
.hm-bad p{display:flex; flex-direction:column; align-items:center; padding:6px 4px; line-height:1.45}
.hm-bad b{font-size:15.5px; font-weight:700; white-space:nowrap}
.hm-angas{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #EFE2D5}
.hm-angas > div{display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 6px 8px; line-height:1.45}
.hm-angas > div:nth-child(even){border-left:1px solid #EFE2D5}
.hm-angas > div:nth-child(n+3){border-top:1px solid #EFE2D5}
.hm-angas h3{align-self:stretch; background:#FFF6E8; font-size:13.5px; font-weight:700; padding:6px 4px; margin:0 -6px 6px}
.hm-angas b{font-size:16px; font-weight:700}
.hm-angas span{font-size:12.5px; color:#6B6259}
.hm-today{border-top:1px solid #EFE2D5; padding:10px 16px; font-size:14.5px; line-height:1.7}
.hm-today b{color:#C0392B}
.hm-sfoot{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; border-top:1px solid #EFE2D5; background:#FFFAF2; padding:10px 16px; font-size:13px; color:#6B6259}
.hm-sfoot b{color:#2B2524}
.hm-sfoot a{color:#B45309; font-weight:700; font-size:14px; white-space:nowrap}
.hm-sfoot > span:last-child{text-align:right}
@media (max-width:479px){
  .hm-sfoot{grid-template-columns:1fr 1fr}
  .hm-sfoot a{grid-column:1 / -1; grid-row:2; text-align:center}
  .hm-shead p{font-size:13px}
}
@media (min-width:760px){
  .hm-sun{display:flex; flex-wrap:wrap; gap:4px 28px}
  .hm-sun p{justify-content:flex-start}
  .hm-times{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .hm-bad{border-top:0; border-left:1px solid #EFE2D5}
  .hm-angas{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hm-angas > div:nth-child(n+3){border-top:0}
  .hm-angas > div + div{border-left:1px solid #EFE2D5}
}

/* ---------- the month's special days ---------- */
.hm-sech{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px solid #EFE2D5}
.hm-sech h2{font-size:19px; font-weight:700; color:#2B2524; margin:0}
.hm-sech span{font-size:13.5px; font-weight:600; color:#8A817A; white-space:nowrap}
.hm-mbox{margin-top:12px}
/* one box holding the whole row: each day as wide as its text (at most 80% of the box), so the next one peeks;
   its height kept before the cards are drawn (no jump) */
.hm-mtrack{list-style:none; margin:0; padding:16px 0; min-height:125px; box-sizing:border-box; display:grid; grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto;
  scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,#FBEFEC 0%,#FFFFFF 100%); border:1px solid #E9C99F; border-radius:14px}
.hm-mtrack::-webkit-scrollbar{display:none}
.hm-mtrack li{--ic:28px; scroll-snap-align:start; display:flex; flex-direction:column; padding:0 14px; min-width:0; max-width:80vw; line-height:1.45;
  font-size:13.5px; color:#2B2524}
.hm-mtrack li.past{opacity:.6}
.hm-mhead{display:flex; align-items:center; gap:7px; margin:0 0 4px}
.hm-mhead img{width:var(--ic); height:var(--ic); object-fit:contain; flex:0 0 auto}
.hm-mhead b{font-size:16px; font-weight:600; color:#A0472F; line-height:1.3; min-width:0}
@media (min-width:760px){.hm-mhead b{font-size:16.5px}}
/* the lines under the name start where the name's text starts, not under the icon */
.hm-mlines{display:flex; flex-direction:column; gap:1px; padding-left:calc(var(--ic) + 7px); min-width:0}
.hm-mdate{font-size:13.5px; font-weight:700; color:#2B2524}
.hm-mtamil{font-size:13.5px; color:#2E7D32}
.hm-mtime{font-size:12.5px; color:#6B6259; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* the row's scroll bar, in the theme orange */
.hm-mbar{position:relative; height:4px; margin:12px auto 0; width:min(160px,45%); border-radius:4px; background:#F6E2CF}
.hm-mbar span{position:absolute; top:0; height:100%; border-radius:4px; background:#FF7700}
.hm-mlink{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px; font-size:15px; font-weight:700; color:#FF7700; text-decoration:none}
.hm-mlink span{font-size:19px; line-height:1}

/* ---------- below the month's special days: the home-v18 mockup's sections ---------- */
.hm-lower{--line:#EDE4D8; --cream:#FFFBF6; --orange-soft:#FFF1E2; --orange-ink:#B55D00; --peach-deep:#E5772A;
  --green-soft:#E8F5EC; --green-ink:#0F6E3C; --rose:#F4DBD7; --rose-ink:#BD5746; --head:#35343D; --muted:#8A817A; --grey:#6B6259;
  box-sizing:border-box; max-width:760px; margin-left:auto !important; margin-right:auto !important; color:#2B2524}
.hm-lower a{text-decoration:none}
.hm-lower .hm-sech{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:34px 0 12px; border:0; padding:0}
.hm-lower .hm-sech h2{font-size:19px; line-height:1.4; letter-spacing:-.2px; margin:0; font-weight:700; color:var(--head)}
.hm-lower .hm-sech .cnt{font-size:13.5px; font-weight:600; color:var(--muted); white-space:nowrap}
@media (min-width:760px){.hm-lower .hm-sech{margin:40px 0 14px} .hm-lower .hm-sech h2{font-size:22px}}
.hm-lower svg{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}

/* அதிகம் தேடப்படுபவை */
.hm-ql8{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.hm-ql8 a{display:flex; align-items:center; gap:14px; border-radius:8px; padding:14px 16px; min-height:64px; background:#FAF1F1;
  color:var(--head); line-height:1.35; min-width:0}
.hm-ql8 a:hover{background:#F2E4E0}
.hm-ql8 .tl{flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center}
.hm-ql8 .tl img{max-width:100%; max-height:100%; object-fit:contain}
.hm-ql8 b{font-size:16px; font-weight:500; line-height:1.4; min-width:0}
@media (max-width:599px){
  .hm-ql8{gap:10px}
  .hm-ql8 a{gap:10px; padding:10px 12px; min-height:54px}
  .hm-ql8 .tl{width:28px; height:28px}
  .hm-ql8 b{font-size:14.5px}
}

/* முகூர்த்தங்கள்: photo cards, the name under the photo */
.hm-mugph{display:grid; grid-template-columns:1fr 1fr; gap:18px 16px}
@media (min-width:700px){.hm-mugph{grid-template-columns:repeat(3,1fr); gap:22px 20px}}
.hm-mugph a{display:flex; flex-direction:column; gap:8px; border:1px solid #D4D4D4; border-radius:8px; padding:8px 8px 12px; background:#fff;
  color:#1F1F1F; min-width:0}
.hm-mugph a:hover{border-color:#F08A3C}
.hm-mugph img{width:100%; aspect-ratio:159 / 84; object-fit:cover; border-radius:6px; display:block}
.hm-mugph b{font-size:15px; font-weight:400; line-height:1.5; padding:0 2px}
@media (min-width:700px){.hm-mugph a{padding:10px 10px 14px} .hm-mugph b{font-size:16px}}

/* the tools: square white picture cards with a warm shadow, the name centred under each; no heading */
/* six tools: three to a row on phones, all six in one row on desktop */
.hm-tools8{display:grid; grid-template-columns:repeat(3,1fr); gap:24px 22px; margin-top:34px}
@media (min-width:700px){.hm-tools8{grid-template-columns:repeat(6,1fr); margin-top:40px}}

.hm-tools8 a{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; color:#1F1F1F;
  font-size:16px; font-weight:400; line-height:1.6; min-width:0}
.hm-tools8 .tl{width:100%; aspect-ratio:1; display:grid; place-items:center; background:#fff; border:1px solid #F6E7D8; border-radius:14px;
  box-shadow:0 2px 6px rgba(232,170,120,.25); color:#E5772A; overflow:hidden}
.hm-tools8 a:hover .tl{box-shadow:0 3px 10px rgba(232,170,120,.4)}
.hm-tools8 .tl img{width:70%; height:70%; object-fit:contain}
.hm-tools8 .tl img.ic{width:52%; height:52%}
.hm-tools8 svg{width:46%; height:46%}

/* பலன்கள்: a pink band across the page with orange pill links */
.hm-palan{margin-top:34px; padding:22px 0 26px; background:#FBF1EF; box-shadow:0 0 0 100vmax #FBF1EF; clip-path:inset(0 -100vmax)}
.hm-palan h2{font-size:19px; line-height:1.4; margin:0 0 16px; font-weight:700; color:var(--head)}
@media (min-width:760px){.hm-palan{margin-top:40px} .hm-palan h2{font-size:22px}}
.hm-palan .pills{display:flex; flex-wrap:wrap; gap:12px 14px}
.hm-palan .pills a{display:inline-flex; align-items:center; gap:14px; padding:8px 14px; border:1.5px solid #F08A3C; border-radius:999px;
  background:#fff; color:#E5772A; font-size:15px; line-height:1.4}
.hm-palan .pills a:hover{background:#FFF4EA}
.hm-palan .pills span[aria-hidden]{font-size:20px; line-height:1; font-weight:600}


/* இந்தத் தளம் பற்றி, FAQ */
.hm-about{background:var(--cream); border-radius:12px; padding:16px 18px; font-size:15px; line-height:1.85; margin-top:34px}
.hm-faq .hm-sech{margin-top:34px}
/* the narrowest phones: long single words must fit */
@media (max-width:359px){
  .hm-tools8{gap:18px 12px}
  .hm-tools8 a{font-size:14px}
}
@media (max-width:359px){
  .hm-mtrack li{--ic:22px; padding:0 10px}
  .hm-mdate,.hm-mtamil{font-size:13px}
  .hm-mtime{font-size:12px}
}

/* the time line stays on one line: smaller where the column is narrow */
@media (min-width:760px){.hm-mtrack li{--ic:26px; padding:0 14px} .hm-mtrack .hm-mhead{gap:6px} .hm-mtrack .hm-mlines{padding-left:calc(var(--ic) + 6px)} .hm-mtrack .hm-mtime{font-size:12px}}
@media (max-width:359px){.hm-mtrack .hm-mtime{font-size:11px}}