/* TMC-137: the சூரிய உதயம் and சந்திர உதயம் pages as the PO's v4 mockups (surya-udhayam-v4.html,
   chandra-udhayam-v4.html), on top of each page's own stylesheet; scoped under .tmc90. One column (no side
   card), the controls in a cream box with a type-to-search city box, a mild hero, rose table headings. Colours,
   pills and tables are the mockups' own, not the site's (user, 2026-10-13, after the PO's "update the UI as per the file"). */
.tmc90{--rose:#F4DBD7; --rose-ink:#BD5746; --orange-ink:#B55D00; --green-ink:#0F6E3C; --cream:#FFF9EF; --line:#EADFD2; --rule:#F1E8DD}

/* one column */
@media (min-width:1080px){.tmc90 .layout{display:block}}
.tmc90 .rail{display:none}

/* controls: city (type to search), என் ஊர், date, ‹ இன்று › */
.tmc90 .controls{display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; align-items:end; background:var(--cream);
  border:1px solid var(--line); border-radius:14px; padding:10px 12px; margin:10px 0 0}
.tmc90 .controls label{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); line-height:1.6; min-width:0}
.tmc90 .controls input[type=text],.tmc90 .controls input[type=date]{width:100%; font:inherit; font-size:14.5px; line-height:1.4;
  padding:9px 10px; border:1px solid #E6D9CC; border-radius:10px; background:#fff; color:var(--head); min-height:42px}
.tmc90 .controls input:focus{outline:2px solid var(--rose); border-color:var(--rose-ink)}
.tmc90 .selhid{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.tmc90 .combo{position:relative}
.tmc90 .combo input{padding-right:38px}
.tmc90 .combo .carr{position:absolute; right:4px; top:4px; bottom:4px; width:32px; border:0; background:transparent;
  color:var(--rose-ink); cursor:pointer; display:grid; place-items:center; border-radius:8px}
.tmc90 .combo .carr svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.tmc90 .combo ul{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30; max-height:260px; overflow:auto; margin:0;
  padding:4px; list-style:none; background:#fff; border:1px solid #E6D9CC; border-radius:10px; box-shadow:0 8px 24px rgba(60,40,20,.12)}
.tmc90 .combo li{padding:9px 12px; font-size:14px; color:var(--head); border-radius:7px; cursor:pointer; line-height:1.4}
.tmc90 .combo li.hl,.tmc90 .combo li:hover{background:var(--rose)}
.tmc90 .combo li[aria-selected="true"]{color:var(--rose-ink); font-weight:600}
.tmc90 .combo li.none{color:var(--muted); cursor:default}
.tmc90 .controls .btn{color:var(--rose-ink); border-color:#EFCFC8}
.tmc90 .controls .btn:hover{background:var(--rose)}
.tmc90 .controls .navg{display:flex; border:1px solid #EFCFC8; border-radius:var(--pill); overflow:hidden; background:#fff}
.tmc90 .controls .navg .btn{border:0; border-radius:0; padding:8px 14px; min-height:42px; font-size:13.5px}
.tmc90 .controls .navg .btn+.btn{border-left:1px solid #EFCFC8}
.tmc90 .controls .navg #todayBtn{flex:1; font-weight:600}
.tmc90 .controls #geoBtn{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:42px; padding:8px 12px;
  font-size:13.5px; background:var(--rose); border-color:var(--rose); color:var(--rose-ink); font-weight:600}
.tmc90 .controls #geoBtn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:599px){.tmc90 .controls .cityf,.tmc90 .controls #geoBtn{grid-column:1 / -1}}
/* the narrowest phones: the date and ‹ இன்று › don't fit side by side */
@media (max-width:359px){.tmc90 .controls .datef,.tmc90 .controls .navg{grid-column:1 / -1}}
@media (min-width:600px){
  .tmc90 .controls{grid-template-columns:minmax(0,1.4fr) 180px auto auto}
  .tmc90 .controls .cityf{order:1} .tmc90 .controls .datef{order:2} .tmc90 .controls .navg{order:3} .tmc90 .controls #geoBtn{order:4}
}

/* mild hero: white boxes on a light cream card, no icons */
.tmc90 .hero{background:#FFF6EC; border:1px solid #F6E3CD; border-radius:16px; box-shadow:none; padding:14px 15px 15px; margin:12px 0 10px}
.tmc90 .hero::after{display:none}
.tmc90 .hero .when{color:#8A5A2B}
.tmc90 .hero .tadate{font-weight:700; line-height:1.6}
.tmc90 .hero .pair{grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
.tmc90 .hero .slot{background:#fff; border:1px solid #F3E2CF; border-radius:12px; padding:12px 10px; min-width:0}
.tmc90 .hero .slot .ic{display:none}
.tmc90 .hero .slot .lb{font-size:12.5px; color:var(--muted); line-height:1.6}
.tmc90 .hero .slot .tm{font-size:clamp(22px,6vw,30px); color:var(--orange-ink); margin-top:2px}
.tmc90 .hero .slot .sub{color:var(--grey-head)}
.tmc90 .hero .stats{grid-template-columns:1fr 1fr; gap:8px; margin-top:10px}
.tmc90 .hero .stat{background:#fff; border:1px solid #F3E2CF; border-radius:10px; padding:9px 11px}
.tmc90 .hero .stat .v{font-size:15px}
.tmc90 .hero .stat .v.ta{font-size:14px}
@media (max-width:599px){.tmc90 .hero .stat:last-child:nth-child(odd),.tmc90 .hero .slot:last-child:nth-child(odd){grid-column:1 / -1}}
@media (min-width:600px){.tmc90 .hero .stats{grid-template-columns:repeat(3,1fr)} .tmc90 .hero .pair{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}
@media (min-width:900px){.tmc90 .hero .stats{grid-template-columns:repeat(5,1fr)}}

/* quick pills: rose outline, the chosen one filled */
.tmc90 .quickbar .qp{border-color:#EFCFC8; color:var(--rose-ink); background:#fff}
.tmc90 .quickbar .qp:hover{border-color:var(--rose-ink); color:var(--rose-ink)}
.tmc90 .quickbar .qp[aria-pressed="true"]{background:var(--rose-ink); border-color:var(--rose-ink); color:#fff}

/* tables: rose headings; the day cell shows its Tamil date */
.tmc90 table thead th{background:var(--rose); color:#3B2B28; font-weight:700}
.tmc90 tr.today td{background:#FFE0C4 !important}
.tmc90 td.daycell .td{display:block; font-size:12px; color:var(--green-ink); font-weight:600; line-height:1.5}
.tmc90 td.daycell .wd{display:block; font-size:12px; color:var(--muted)}
@media (min-width:700px){.tmc90 td.daycell .wd{display:inline; margin-left:6px}}
.tmc90 table.kv td:first-child{width:34%; color:var(--muted)}
.tmc90 .mi{display:inline-block; width:15px; height:15px; vertical-align:-3px; margin-right:3px}
.tmc90 .quickbar .qp .mi,.tmc90 .hero .mi{width:16px; height:16px}

/* the note under the article */
.tmc90 .clarify{background:#FFE0C4; border:0; border-left:4px solid var(--orange); color:var(--body); font-size:14px}

/* note (mockup's .note, no icon) and பரிந்துரைகள் cards, as on the அரசு விடுமுறை page */
.tmc90 .clarify.note{background:var(--orange-soft, #FFF1E2); border:0; border-radius:12px; padding:14px 16px; font-size:14px; line-height:1.85; color:var(--body, #2B2524)}
.tmc90 .reco{display:grid; grid-template-columns:1fr; gap:10px}
@media (min-width:600px){.tmc90 .reco{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.tmc90 .reco{grid-template-columns:repeat(4,1fr)}}
.tmc90 .reco a{display:flex; align-items:center; gap:12px; background:var(--rose); border-radius:12px; padding:10px 12px; color:var(--head); font-weight:700; font-size:14px; line-height:1.4; text-decoration:none}
.tmc90 .reco a .tl{width:44px; height:44px; border-radius:10px; background:#fff; display:grid; place-items:center; color:#BD5746; flex:0 0 auto}
.tmc90 .reco a .tl svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.tmc90 .reco a span.t{flex:1}
.tmc90 .reco a::after{content:"›"; font-size:20px; color:#BD5746}