/* சிறப்பு நாட்கள் hub and per-viratham pages, ported from the "சிறப்பு நாட்கள் 2026" mockups; scoped under .tmc90.
   Colours and fonts come from the site theme (css/tmc/shared/tmc90-theme.css). */
.tmc90{--orange:#FF7700; --orange-lt:#FF851A; --orange-soft:#FFF1E2;
  --cream:#FFFBF6; --cream-deep:#FFF3E6; --white:#FFFFFF;
  --ink:#1B1B1B; --body:#2B2524; --head:#35343D; --muted:#8A817A;
  --grey-head:#6B6259;
  --green:#248D49; --green-soft:#E8F5EC; --red:#D14343;
  --line:#E9E1D6; --rule:#ECE8E3;
  --radius-s:8px; --radius-m:12px; --radius-l:16px; --pill:32px;
  --shadow:0 4px 16px rgba(107,82,51,.08);
  --gutter:16px; --maxw:1200px;
  --lh-tight:1.35; --lh-body:1.75; --lh-head:1.4;
  --ff-ta:'Anek Tamil','Noto Sans Tamil',system-ui,sans-serif;
  --ff-num:'Inter',system-ui,sans-serif;}
.tmc90 h1,.tmc90 h2,.tmc90 h3{color:var(--head); margin:0; line-height:var(--lh-head); font-weight:700}
.tmc90 h1{font-size:24px}
.tmc90 h2{font-size:20px}
.tmc90 h3{font-size:16px}
.tmc90 p{margin:0; line-height:var(--lh-body)}
.tmc90 a{color:var(--orange); text-decoration:none}
.tmc90 .wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
.tmc90 .page-head{padding:22px 0 6px}
.tmc90 .page-head p{margin-top:6px; font-size:14px; color:var(--body)}
.tmc90 .crumb{font-size:12px; color:var(--muted); line-height:1.6; margin-bottom:8px}
.tmc90 .crumb a{color:var(--muted)}
.tmc90 .section{margin:26px 0}
.tmc90 .section > h2{margin-bottom:12px}
.tmc90 .prose{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); padding:18px 16px}
.tmc90 .prose h3{margin:18px 0 8px}
.tmc90 .prose h3:first-child{margin-top:0}
.tmc90 .prose p + p{margin-top:10px}
.tmc90 .prose ul{margin:8px 0 0; padding-left:20px}
.tmc90 .prose li{line-height:1.8; margin-bottom:6px}
.tmc90 details{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); padding:0; margin-bottom:10px}
.tmc90 summary{list-style:none; cursor:pointer; padding:14px 16px; font-weight:600; color:var(--head);
  font-size:15px; line-height:1.6; display:flex; justify-content:space-between; gap:12px; align-items:center}
.tmc90 summary::-webkit-details-marker{display:none}
.tmc90 summary::after{content:"+"; font-family:var(--ff-num); color:var(--orange); font-size:20px; line-height:1}
.tmc90 details[open] summary::after{content:"–"}
.tmc90 details .ans{padding:0 16px 14px; font-size:14px; line-height:1.8}
.tmc90 .ad{margin:22px 0; min-height:100px; background:var(--white); border:1px dashed var(--line);
  border-radius:var(--radius-m); display:grid; place-items:center; color:var(--muted); font-size:12px; line-height:1.6}
@media (min-width:768px){
.tmc90 h1{font-size:32px}
.tmc90 h2{font-size:24px}
.tmc90 h3{font-size:18px}
.tmc90 .prose{padding:24px}
}
@media (min-width:1024px){
.tmc90 .layout{display:block}
}
.tmc90 .page-head h1{font-size:clamp(25px,5.6vw,32px); line-height:1.4}
.tmc90 .page-head p{font-size:14px; line-height:1.95; color:var(--body); margin-top:7px}
.tmc90 .section h2{font-size:clamp(17px,4.2vw,21px); line-height:1.55}
.tmc90 .section h3{font-size:15.5px; line-height:1.65; margin:17px 0 6px}
.tmc90 .prose p,.tmc90 .prose li{font-size:14px; line-height:1.95}
.tmc90 .prose{border:0; background:transparent; padding:0}
.tmc90 .prose ul{margin:8px 0 0; padding-left:20px}
.tmc90 .prose li{margin-top:5px}
.tmc90 .notice{margin-top:15px; padding:11px 14px; background:var(--cream); border:1px solid var(--line);
  border-left:3px solid var(--orange); border-radius:10px;
  font-family:var(--ff-ta); font-size:13px; line-height:1.9; color:var(--grey-head)}
.tmc90 .notice b{color:var(--head)}
.tmc90 main.wrap{overflow-x:hidden}
.tmc90 .opills{display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; gap:8px; margin:15px -16px 0; padding:3px 16px 5px}
.tmc90 .opills::-webkit-scrollbar{display:none}
.tmc90 .opill{flex:0 0 auto; white-space:nowrap; font-family:var(--ff-ta); font-size:13.5px;
  font-weight:500; line-height:1.5; padding:8px 16px; border-radius:var(--pill);
  border:1px solid var(--line); background:#fff; color:var(--head); text-decoration:none;
  transition:background .15s,border-color .15s,color .15s}
.tmc90 .opill:hover{border-color:var(--orange); color:var(--head)}
.tmc90 .opill.cur{background:var(--orange); border-color:var(--orange); color:#fff; font-weight:600}
@media (min-width:761px){
.tmc90 .opills{flex-wrap:wrap; margin:15px 0 0; padding:0}
}
.tmc90 .cnt{font-family:var(--ff-ta); font-size:13px; line-height:1.85; color:var(--grey-head);
  margin:16px 0 8px}
.tmc90 .cnt b{font-family:var(--ff-num); font-size:14.5px; color:var(--head)}
.tmc90 .tw{border:1px solid var(--line); border-radius:13px; overflow:hidden; background:#fff}
.tmc90 table.tc{width:100%; border-collapse:collapse; table-layout:fixed; background:#fff}
.tmc90 table.tc thead th{background:var(--rose); color:#3B2B28; font-family:var(--ff-ta); font-size:13px;
  font-weight:700; line-height:1.7; text-align:left; padding:11px 16px; border:0}
.tmc90 table.tc td{font-family:var(--ff-ta); font-size:14px; line-height:1.9; color:var(--body);
  padding:13px 16px; border:0; border-top:1px solid var(--rule); vertical-align:middle}
.tmc90 table.tc tbody tr:first-child td{border-top:0}
.tmc90 table.tc tbody tr:hover td{background:var(--cream)}
.tmc90 .dt{white-space:nowrap}
.tmc90 .dw{font-family:var(--ff-num); font-size:12.5px; font-weight:500; color:var(--rose-ink); margin-left:8px}
.tmc90 .ds{display:block; margin-top:1px; font-size:12.5px; line-height:1.8}
.tmc90 .ds .d1{color:var(--head); font-weight:500}
.tmc90 .ds .d2{color:var(--grey-head); margin-left:8px}
.tmc90 .nk{display:block; font-size:14px; font-weight:600; color:var(--head); line-height:1.6}
.tmc90 .th{display:block; font-size:12.5px; font-weight:500; color:var(--green-ink); line-height:1.75}
.tmc90 .sp{font-family:var(--ff-ta); font-size:12.5px; line-height:1.75; color:var(--grey-head)}
.tmc90 .hub{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:17px}
.tmc90 .hcard{display:block; background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:15px 17px 14px; text-decoration:none; color:var(--body);
  transition:border-color .15s, box-shadow .15s}
.tmc90 .hcard:hover{border-color:var(--orange-lt); box-shadow:0 5px 16px rgba(120,80,40,.08)}
.tmc90 .hc-h{display:flex; align-items:center; gap:10px; font-family:var(--ff-ta); font-size:16px;
  font-weight:700; line-height:1.5; color:var(--head)}
.tmc90 .hc-n{margin-left:auto; font-family:var(--ff-num); font-size:11.5px; font-weight:700;
  min-width:24px; height:22px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 7px; border-radius:var(--pill); background:var(--rose); color:var(--rose-ink)}
.tmc90 .hc-p{margin:5px 0 0; font-size:13px; line-height:1.85; color:var(--grey-head)}
.tmc90 .hc-d{display:flex; flex-wrap:wrap; gap:7px; margin:11px 0 0}
.tmc90 .hc-d span{font-family:var(--ff-num); font-size:12px; font-weight:600; line-height:1.5;
  padding:5px 11px; border-radius:var(--pill); background:var(--cream); color:var(--head)}
.tmc90 .hc-d i{font-family:var(--ff-ta); font-style:normal; font-weight:500; color:var(--muted); margin-left:4px}
.tmc90 .hc-go{display:inline-block; margin-top:11px; font-family:var(--ff-ta); font-size:13px;
  font-weight:600; color:var(--rose-ink)}
.tmc90 .srcbox{background:var(--cream); border:1px solid var(--line); border-radius:13px;
  padding:15px 17px; font-family:var(--ff-ta); font-size:13px; line-height:1.95; color:var(--body)}
.tmc90 .srcbox p{margin:0}
.tmc90 .srcbox a{color:var(--rose-ink)}
.tmc90 .srcdate{font-family:var(--ff-num); font-size:11.5px; color:var(--muted); line-height:1.8;
  padding-top:9px; border-top:1px solid var(--line); margin-top:10px !important}
.tmc90 .linkpills{display:flex; flex-wrap:wrap; gap:9px; margin-top:12px}
.tmc90 .linkpills a{flex:1 1 auto; text-align:center; font-family:var(--ff-ta); font-size:13.5px;
  line-height:1.6; padding:11px 17px; border-radius:10px; border:1px solid var(--line);
  background:#fff; color:var(--head); text-decoration:none}
.tmc90 .linkpills a:hover{border-color:var(--rose-ink); color:var(--rose-ink)}
@media (max-width:760px){
.tmc90 .tw{border:1px solid var(--line)}
.tmc90 table.tc{display:table}
.tmc90 table.tc tbody tr td{padding:12px 14px}
.tmc90 .linkpills a{flex:1 1 100%}
}
@media (max-width:420px){
.tmc90 table.tc thead th{font-size:12px; padding:10px 12px}
.tmc90 table.tc td{font-size:13px; padding:11px 12px}
.tmc90 .nk{font-size:13.5px}
.tmc90 .sp{font-size:12px}
}
.tmc90 table.tc col.cd{width:38%}
.tmc90 table.tc col.ci{width:62%}
.tmc90 table.tc td{vertical-align:top}
.tmc90 .tmline{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; line-height:1.8}
.tmc90 .tmline .na{font-family:var(--ff-ta); font-size:13px; color:var(--muted)}
.tmc90 .plline{display:flex; flex-wrap:wrap; gap:5px; margin-top:6px}
.tmc90 .pl{display:inline-flex; align-items:center; font-family:var(--ff-ta); font-size:12.5px;
  line-height:1.7; padding:2px 10px; border-radius:var(--pill);
  border:1px solid var(--line); background:#fff; color:var(--body); white-space:nowrap}
.tmc90 .pl.nk,.tmc90 .pl.th{background:var(--green-soft); color:var(--green-ink); font-weight:600;
  border-color:#CFE3D5}
.tmc90 .pl.st{font-size:11.5px; font-weight:500; color:var(--muted); gap:5px}
.tmc90 .pl.st em{font-style:normal; font-family:var(--ff-ta)}
.tmc90 .pl.sp{background:var(--rose); border-color:#EAC9C2; color:var(--rose-ink); font-weight:700}
.tmc90 .pl.pk{gap:5px; background:var(--cream); color:var(--grey-head); font-weight:500}
.tmc90 .pic{width:13px; height:13px; flex:0 0 auto; fill:none; stroke:currentColor;
  stroke-width:1.4; color:var(--peach-deep)}
@media (max-width:760px){
.tmc90 table.tc col.cd{width:42%}
.tmc90 table.tc col.ci{width:58%}
.tmc90 .tmline{gap:2px 5px}
.tmc90 .pl{font-size:12px; padding:2px 9px}
}
@media (max-width:420px){
.tmc90 .plline{margin-top:5px; gap:4px}
.tmc90 .pl{font-size:11.5px; padding:2px 8px}
}
.tmc90 .mtabs{display:flex; gap:7px; overflow-x:auto; padding:3px 0 11px; scrollbar-width:none}
.tmc90 .mtabs::-webkit-scrollbar{display:none}
.tmc90 .mtab{flex:0 0 auto; font-family:var(--ff-ta); font-size:13.5px; line-height:1.5;
  padding:7px 15px; border-radius:var(--pill); border:1px solid var(--line);
  background:#fff; color:var(--head); cursor:pointer}
.tmc90 .mtab:hover{border-color:var(--rose-ink); color:var(--rose-ink)}
.tmc90 .mtab.on{background:var(--orange); border-color:var(--orange); color:#fff; font-weight:600}
/* Month tabs a size bigger on desktop (TMC-124). */
@media (min-width:761px){.tmc90 .mtabs{flex-wrap:wrap; gap:7px}.tmc90 .mtab{font-size:15px; padding:9px 16px}}
.tmc90 .mwrap{display:grid; gap:11px; grid-template-columns:1fr; align-items:start}
@media (min-width:620px){
.tmc90 .mwrap{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){
.tmc90 .mwrap{grid-template-columns:repeat(3,1fr)}
}
.tmc90 .mcard{background:#fff; border:1px solid var(--line); border-radius:13px; overflow:hidden}
.tmc90 .mc-h{display:flex; align-items:center; gap:9px; padding:11px 14px; background:var(--cream);
  border-bottom:1px solid var(--line); font-family:var(--ff-ta); font-size:15px;
  font-weight:700; line-height:1.6; color:var(--rose-ink); text-decoration:none}
.tmc90 .mc-h:hover{background:var(--rose)}
.tmc90 .mc-n{font-family:var(--ff-num); font-size:11px; font-weight:700; color:var(--muted);
  background:#fff; border:1px solid var(--line); border-radius:var(--pill); padding:1px 8px;
  line-height:1.8}
.tmc90 .mc-r{padding:10px 14px; border-top:1px solid var(--rule)}
.tmc90 .mc-r:first-of-type{border-top:0}
.tmc90 .mc-d{display:block; font-family:var(--ff-num); font-size:14.5px; font-weight:600;
  color:var(--head); line-height:1.7}
.tmc90 .mc-t{display:block; font-family:var(--ff-ta); font-size:13px; line-height:1.85;
  color:var(--grey-head)}
.tmc90 .mc-sp{display:inline-flex; margin-top:5px; font-family:var(--ff-ta); font-size:12px;
  line-height:1.7; padding:2px 10px; border-radius:var(--pill);
  background:var(--rose); color:var(--rose-ink); font-weight:600}
.tmc90 .mnone{font-family:var(--ff-ta); font-size:13.5px; line-height:1.9; color:var(--muted);
  padding:18px 2px}
.tmc90 .tradnote{margin-top:16px; padding:13px 16px; background:var(--cream);
  border:1px solid var(--line); border-left:3px solid var(--orange); border-radius:11px;
  font-family:var(--ff-ta); font-size:13px; line-height:1.95; color:var(--grey-head)}
.tmc90 .tradnote b{color:var(--head)}
.tmc90 .calcnote{margin-top:11px; font-family:var(--ff-ta); font-size:12.5px; line-height:1.9;
  color:var(--muted)}
.tmc90 .oic{width:17px; height:17px; flex:0 0 auto; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.tmc90 .opills .opill{display:inline-flex; align-items:center; gap:7px}
.tmc90 .opills .opill .oic{color:var(--peach-deep)}
.tmc90 .opills .opill.cur .oic{color:#fff}
.tmc90 .mc-h .oic{width:18px; height:18px; color:var(--peach-deep)}
.tmc90 .mc-h span:first-of-type{flex:1 1 auto}
.tmc90 .hc-h .oic{width:19px; height:19px; color:var(--peach-deep)}
.tmc90 .hc-h .hc-t{flex:1 1 auto}
.tmc90 .dt{white-space:normal; display:block; line-height:1.6}
.tmc90 .dt .den{font-family:var(--ff-num); font-size:15.5px; font-weight:500; color:var(--head);
  white-space:nowrap}
.tmc90 .dt .dw{font-family:var(--ff-num); font-size:13px; font-weight:500; color:var(--rose-ink);
  margin-left:0; white-space:nowrap}
.tmc90 .ds{display:block; margin-top:3px; font-size:13.5px; line-height:1.75}
.tmc90 .ds .d1{color:var(--head); font-weight:500; white-space:nowrap}
.tmc90 .ds .d2{color:var(--grey-head); margin-left:0; white-space:nowrap}
.tmc90 .tmline{display:block; line-height:1.75; font-size:14.5px}
.tmc90 .tmline .t{font-family:var(--ff-num); font-weight:600; color:var(--head); white-space:nowrap;
  font-variant-numeric:tabular-nums}
.tmc90 .tmline .sep{color:var(--grey-head); margin:0 6px}
.tmc90 .tmline .rel{font-family:var(--ff-ta); font-weight:600; color:var(--rose-ink); white-space:nowrap}
.tmc90 .pl{background:transparent !important; font-weight:500}
.tmc90 .pl.nk,.tmc90 .pl.th{color:var(--green-ink); border-color:#B9D8C3; font-weight:600}
.tmc90 .pl.sp{color:var(--rose-ink); border-color:#E2B3A9; font-weight:600}
.tmc90 .pl.pk{color:var(--grey-head); border-color:var(--line)}
.tmc90 .pl.st,.tmc90 .pl.rh{font-family:var(--ff-ta); font-size:12.5px; color:var(--grey-head);
  border-color:var(--line); font-variant-numeric:tabular-nums}
.tmc90 .pl.rh{color:#8A4B12; border-color:#EBCB9F; white-space:normal; border-radius:12px}
/* The app's pills everywhere (2026-10-10): the current page / chosen filter filled orange, on phones and desktop. */
.tmc90 .opills .opill.cur .oic{color:#fff}
.tmc90 .hc-n{background:transparent !important; border:1px solid #E2B3A9}
.tmc90 .mc-sp{background:transparent !important; border:1px solid #E2B3A9}
/* All · தேய்பிறை · வளர்பிறை: the shared pill (css/tmc/shared/tmc90-theme.css); here only the row's margins. */
.tmc90 .pfil{margin:14px 0 2px}
@media (max-width:760px){
.tmc90 table.tc col.cd{width:44%}
.tmc90 table.tc col.ci{width:56%}
.tmc90 .tmline{font-size:14px}
.tmc90 .dt .den{font-size:15px}
}
@media (max-width:420px){
.tmc90 table.tc td{padding:11px 11px}
.tmc90 .tmline{font-size:13.5px}
.tmc90 .tmline .sep{margin:0 4px}
.tmc90 .ds{font-size:13px}
}
.tmc90 .filtered .pl.pk{display:none}
.tmc90 .pl.rh em{font-style:normal}
@media (max-width:420px){
.tmc90 .pl.rh em{display:block}
.tmc90 .pl.rh{padding:4px 11px}
}

/* Design colours not in the first token block (same values as the site theme: --rose-ink = --color-light, --rose = its table head). */
.tmc90{--rose:#F4DBD7; --rose-ink:#BD5746; --peach:#F0D2B4; --peach-deep:#E5772A; --green-ink:#0F6E3C}

/* App additions: base text, the year picker beside the count / heading, and the app's PNG viratham icons. */
.tmc90{margin:0; background:var(--white); color:var(--body); font-family:var(--ff-ta); font-size:15px; line-height:var(--lh-body)}
.tmc90 .toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px}
.tmc90 .toolbar .cnt,.tmc90 .toolbar h2{margin:0; min-width:0}
.tmc90 .section > .toolbar{margin:0 0 12px}
/* Phones: the heading and the year picker stay on one line (a narrower picker, the heading a touch smaller). */
@media (max-width:640px){
  .tmc90 .toolbar h2{white-space:nowrap; font-size:clamp(14px,4.4vw,17px)}
  .tmc90 .toolbar > .relative{width:6rem !important}
}
.tmc90 .sub{font-size:14px; line-height:1.9; color:var(--grey-head); margin:0 0 12px}
.tmc90 img.oic{width:20px; height:20px; object-fit:contain; flex:0 0 auto}
.tmc90 .hc-h img.oic,.tmc90 .mc-h img.oic{width:22px; height:22px}
.tmc90 .tmline .t{font-weight:600; color:var(--head); white-space:normal}
.tmc90 .tmline .ck{white-space:nowrap}
.tmc90 .tmline .rel{font-weight:600; color:var(--rose-ink)}

/* TMC-118: the table (as the mockup) on phones too; "நாளை" in grey, "நேற்று" stays in the accent colour. */
.tmc90 .tmline .nx,.tmc90 .mt-d em .nx{font-family:var(--ff-ta); font-weight:600; color:var(--grey-head); white-space:nowrap}

/* TMC-116: விரத நாட்கள் month view as a table (sirappu-natkal-hub-v10): one viratham per row, all its days in that row. */
.tmc90{--orange-ink:#B55D00; --grey:#6B6259}
.tmc90 .mwrap{display:block}
.tmc90 .mt-tbl col.mk{width:30%}
.tmc90 .mt-tbl col.mv{width:70%}
@media (min-width:700px){.tmc90 .mt-tbl col.mk{width:20%} .tmc90 .mt-tbl col.mv{width:80%}}
.tmc90 .mt-k a{display:flex; align-items:center; gap:8px; font-weight:700; color:var(--rose-ink); font-size:14.5px; line-height:1.4}
.tmc90 .mt-k img.oic{width:22px; height:22px}
.tmc90 .mt-k small{display:inline-block; margin:4px 0 0 30px; font:600 11.5px var(--ff-num); color:var(--orange-ink); background:var(--orange-soft); border-radius:var(--pill); padding:1px 8px}
.tmc90 .mt-g{display:grid; grid-template-columns:1fr; gap:8px}
@media (min-width:700px){.tmc90 .mt-g{grid-template-columns:repeat(3,1fr)}}
.tmc90 .mt-d{border-left:3px solid var(--peach); padding:2px 0 2px 10px; line-height:1.55}
.tmc90 .mt-d b{display:block; font-family:var(--ff-num); font-size:14px; color:var(--head)}
.tmc90 .mt-d > span{display:block; font-size:13px; color:var(--green-ink); font-weight:600}
.tmc90 .mt-d em{display:block; font-style:normal; font-size:12.5px; color:var(--grey); font-weight:600}
.tmc90 .mt-d em .rel{color:var(--rose-ink); font-size:12px}
.tmc90 .mt-d i{display:inline-block; font-style:normal; font-size:12px; color:var(--rose-ink); font-weight:700; margin-top:2px}
/* Phones (as the maatha-calendar mockup): icon above the name, so a long name never runs into the dates. */
@media (max-width:699px){
  .tmc90 .mt-tbl col.mk{width:34%} .tmc90 .mt-tbl col.mv{width:66%}
  .tmc90 .mt-k a{display:block; font-size:13px; line-height:1.35}
  .tmc90 table.mt-tbl td{padding:10px 8px}
  .tmc90 .mt-d{padding-left:8px}
  .tmc90 .mt-k img.oic{display:block; width:20px; height:20px; margin-bottom:3px}
  .tmc90 .mt-k small{margin-left:0}
}
.tmc90 .pl .itmi{width:13px; height:13px; flex:0 0 auto; margin-right:4px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.tmc90 .pl.nk,.tmc90 .pl.st{display:inline-flex; align-items:center}

/* விரத நாட்கள் on phones: no descriptions, and the month as the date list (one row per day) instead of the table. */
.tmc90 .mlist{display:none}
@media (max-width:699px){
  .tmc90 .m-hide{display:none}
  .tmc90 .mwrap .tw{display:none}
  .tmc90 .mlist{display:block}
  .tmc90 .mlist-h{font-size:16px; font-weight:700; line-height:1.6; color:var(--ink); padding:4px 0 6px}
  /* Every row shares one name column; a long name (சங்கடஹர சதுர்த்தி) goes on two lines so the column stays
     narrow and the dates sit further left (TMC-140). */
  .tmc90 .mlist .dl-list{display:grid; grid-template-columns:fit-content(7.6em) minmax(0,1fr); column-gap:10px}
  .tmc90 .mlist .dl-row{grid-column:1 / -1; grid-template-columns:subgrid; gap:0 10px}
  .tmc90 .mlist .dl-name{align-self:center; align-items:center; gap:6px; min-width:auto}
  .tmc90 .mlist .dl-icon{width:22px; height:22px}
  .tmc90 .mlist .dl-icon.sm{width:18px; height:18px; margin:0 2px}
  .tmc90 .mlist .dl-title{font-size:clamp(13px,3.75vw,15.5px); font-weight:500; line-height:1.4; white-space:normal; overflow-wrap:normal}
  /* A viratham that comes more than once in the month: one name, its days stacked with a light rule between. */
  .tmc90 .mlist .dl-days{min-width:0}
  .tmc90 .mlist .dl-lines + .dl-lines{margin-top:10px; padding-top:10px; border-top:1px dashed #E3E3E3}
}
/* The narrowest phones: "நேற்று 7:42 PM - 9:08 PM இன்று" can't fit one line at a readable size, so the day words
   may wrap around the range instead of the line shrinking below 10px (TMC-140). */
@media (max-width:359px){
  .tmc90 .mlist .dl-list .dl-time{white-space:normal}
}

/* A viratham page on phones: the table's rows as they are, without its pink header and outer box. */
@media (max-width:699px){
  .tmc90 #tbl .tw{border:0; border-radius:0; overflow:visible}
  .tmc90 #tbl table.tc thead{display:none}
  /* Every second row on a light cream background (TMC-121). */
  .tmc90 #tbl table.tc tbody tr:nth-child(even) td{background:var(--cream)}
  .tmc90 #tbl table.tc{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .tmc90 #tbl table.tc td{padding:12px 6px}
  .tmc90 #tbl table.tc td.c-d{padding-left:0}
  .tmc90 #tbl table.tc td.c-i{padding-right:0}
  .tmc90 #tbl .tmline .rg{white-space:nowrap}
  /* நேற்று / நாளை look like the Tamil weekday under the date: grey, regular, the same size. */
  .tmc90 #tbl .tmline .nx,.tmc90 #tbl .tmline .rel{color:var(--grey-head); font-weight:400; font-size:13.5px}
  .tmc90 #tbl .dt .dw{color:var(--head)}
  @media (max-width:420px){.tmc90 #tbl .tmline .nx,.tmc90 #tbl .tmline .rel{font-size:13px}}
  .tmc90 #tbl .pl{max-width:100%; white-space:normal}
}