/* கௌரி பஞ்சாங்கம், as the PO's gowri-panchangam-v14 mockup (TMC-158; first the v8 mockup, TMC-154); scoped under .gp.
   Colours and fonts come from the site theme (css/tmc/shared/tmc90-theme.css); text sizes = the Palli Kathum scale;
   the day pills are the app's pill (white, the chosen one filled orange). */
.gp{--orange:#FF7700; --orange-soft:#FFF1E2; --orange-ink:#B55D00;
  --cream:#FFFBF6; --cream-deep:#FFF3E6;
  --peach:#F0D2B4; --peach-deep:#E5772A;
  --rose:#F4DBD7; --rose-ink:#BD5746;
  --good:#1F6B37; --good-bg:#EAF6EC; --bad:#A33A3A; --bad-dot:#C9524F;
  --ink:#1B1B1B; --body:#2B2524; --head:#35343D; --muted:#8A817A; --grey:#6B6259;
  --line:#E9E1D6; --rule:#ECE8E3;
  --radius-s:8px; --radius-m:12px; --pill:32px;
  --gutter:16px; --maxw:1200px;
  --lh-body:1.8; --lh-head:1.4;
  --ff-ta:'Anek Tamil','Noto Sans Tamil',system-ui,sans-serif;
  --ff-num:'Inter',system-ui,sans-serif;
  color:var(--body); font-family:var(--ff-ta); font-size:14px; line-height:var(--lh-body)}
.gp *,.gp *::before,.gp *::after{box-sizing:border-box}
.gp h1,.gp h2,.gp h3{color:var(--head); margin:0; line-height:var(--lh-head); font-weight:700}
.gp p{margin:0; line-height:var(--lh-body)}
.gp a{color:var(--orange); text-decoration:none}
.gp .num{font-family:var(--ff-num)}
.gp .wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:14px var(--gutter) 8px}
.gp .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* page head: the title, the city and the date */
.gp .rp-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin:4px 0 14px}
.gp .rp-head h1{font-size:25px; line-height:1.4}
.gp .rp-head h1 .en{display:block; font-size:12.5px; font-weight:500; line-height:1.4; color:var(--muted)}
@media (min-width:760px){.gp .rp-head h1{font-size:32px; line-height:40px}}
.gp .rp-sel{display:flex; gap:10px; flex-wrap:wrap}
.gp .rp-sel label{position:relative; display:block}
.gp .rp-sel select{appearance:none; -webkit-appearance:none; font:500 15px var(--ff-ta); line-height:1.3; color:var(--ink); background:#fff;
  height:44px; padding:0 40px 0 12px; border:1px solid #DDD6CF; border-radius:8px; min-width:170px; cursor:pointer}
.gp .rp-sel input.dp{font:500 15px var(--ff-num); color:var(--ink); background:#fff; height:44px; padding:0 10px; border:1px solid #DDD6CF;
  border-radius:8px; min-width:150px}
.gp .rp-sel label::after{content:""; position:absolute; right:13px; top:50%; width:8px; height:8px; margin-top:-6px; border-right:1.6px solid var(--ink);
  border-bottom:1.6px solid var(--ink); transform:rotate(45deg); pointer-events:none}
.gp .rp-sel label#dlab::after{display:none}
.gp .rp-sel select:focus-visible,.gp .rp-sel input:focus-visible{outline:2px solid var(--peach-deep); outline-offset:2px}
@media (max-width:480px){.gp .rp-sel{width:100%; flex-wrap:nowrap}
  .gp .rp-sel label{flex:1 1 0; min-width:0} .gp .rp-sel select,.gp .rp-sel input.dp{min-width:0; width:100%}}

/* நேற்று · இன்று · நாளை and என் ஊர் — the app's pill */
.gp .dnav{display:flex; gap:8px; margin:-4px 0 14px; flex-wrap:wrap}
.gp .dnav button{display:inline-flex; align-items:center; gap:6px; font:400 13.5px/1.5 var(--ff-ta); padding:7px 14px; border-radius:var(--pill);
  border:1px solid #E9E1D6; background:#fff; color:var(--head); cursor:pointer; white-space:nowrap}
.gp .dnav button:hover{border-color:var(--orange)}
.gp .dnav button.on{background:var(--orange); border-color:var(--orange); color:#fff; font-weight:600}
.gp .dnav .geo{margin-left:auto; color:var(--orange-ink)}
.gp .dnav .geo svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6}
@media (max-width:420px){.gp .dnav{gap:6px} .gp .dnav button{padding:6px 11px; gap:4px}}

/* the day's card: weekday, date, the place's sunrise and sunset */
.gp .rp-box{margin-top:16px}
@media (max-width:899px){.gp .rp-box{border:1px solid rgba(198,107,4,.4); border-radius:8px; padding:0 0 18px}}
.gp .rp-band{display:flex; align-items:center; gap:8px}
@media (min-width:900px){.gp .rp-band{background:#FCEFE0; border-radius:16px; padding:12px 20px; min-height:143px}}
.gp .rp-card{flex:1; display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:366px; min-height:120px; margin:0 auto;
  padding:16px 18px; background:rgba(255,248,237,.6); border-radius:8px}
@media (max-width:899px){.gp .rp-card{max-width:none; margin:0; border-radius:8px 8px 0 0; background:linear-gradient(180deg,#FFF3EB 0%,#FFF9F5 100%)}}
.gp .rp-card .nm{font-size:30px; font-weight:700; line-height:1.3; color:#D77027}
.gp .rp-card .per{font-size:15.5px; font-weight:500; line-height:1.7; color:#D77027}
.gp .rp-card .sub2{font-size:13.5px; line-height:1.7; color:var(--body)}
.gp .rp-card .sub2 b{font-weight:600; white-space:nowrap}
@media (max-width:360px){.gp .rp-card{padding:14px 12px} .gp .rp-card .nm{font-size:25px} .gp .rp-card .per{font-size:14px} .gp .rp-card .art.ga{width:56px; height:56px}
  .gp .rp-card .art.ga svg{width:32px; height:32px}}
.gp .rp-card .art.ga{display:grid; place-items:center; flex:0 0 auto; background:#fff; width:72px; height:72px; border-radius:50%; color:var(--orange)}
.gp .rp-card .art.ga svg{width:40px; height:40px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round}
.gp .rp-card .art.ga.night{color:#5A5A8A}
@media (min-width:900px){.gp .rp-card .nm{font-size:32px}}

.gp .rp-body{padding:16px 16px 0}
@media (min-width:900px){.gp .rp-body{padding:26px 0 0}}
.gp .rp-p{font-size:14px; line-height:1.9; margin:0 0 10px}
.gp .rp-note{font-size:13px; line-height:1.7; color:var(--grey); background:var(--cream); border:1px solid var(--line); border-radius:8px; padding:9px 12px; margin:0 0 12px}

/* the part running now */
.gp .now{padding:12px 14px; border-radius:8px; margin:0 0 12px; background:var(--good-bg); border:1px solid #CDEBD4}
.gp .now.b{background:#FDECEC; border-color:#F5CFCF}
.gp .now .r1{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px}
.gp .now .k{font-size:12.5px; font-weight:600; line-height:1.4; color:var(--muted)}
.gp .now b{font-size:20px; line-height:1.3; color:var(--good)} .gp .now.b b{color:var(--bad)}
.gp .now .tag{margin-left:auto; flex:0 0 auto; font-size:12.5px; font-weight:700; line-height:1.6; padding:3px 11px; border-radius:var(--pill); background:var(--good); color:#fff}
.gp .now.b .tag{background:var(--bad)}
@media (max-width:420px){.gp .now{padding:10px 12px} .gp .now .r1{gap:4px 8px} .gp .now b{font-size:18px} .gp .now .tag{font-size:12px; padding:2px 9px}}
.gp .now .r2{margin-top:4px}
.gp .now .r2 .num{display:block; font:600 15px/1.4 var(--ff-num); color:var(--body)}
.gp .now .nx{display:block; margin-top:6px; padding-top:6px; border-top:1px solid rgba(0,0,0,.06); font-size:12.5px; line-height:1.6; color:var(--muted)}
.gp .now .nx b{font-size:inherit; line-height:inherit; font-weight:600; color:var(--good)}
.gp .now .nx .t{white-space:nowrap}

/* பகல் / இரவு: two pills on phones, both lists side by side on desktop */
.gp .segs{display:flex; gap:8px; margin:0 0 10px}
.gp .segs button{flex:1; font:600 14px/1.4 var(--ff-ta); padding:8px 10px; border-radius:var(--pill); border:1px solid #E9E1D6; background:#fff; color:var(--head); cursor:pointer}
.gp .segs button small{display:block; font-weight:500; font-size:12px; color:var(--muted)}
@media (max-width:360px){.gp .segs button{padding:7px 6px} .gp .segs button small{font-size:11px}}
.gp .segs button.on{background:var(--orange); border-color:var(--orange); color:#fff}
.gp .segs button.on small{color:#fff}
.gp .lst{display:none} .gp .lst.on{display:block} .gp .lst h3{display:none}
.gp .lst ul{list-style:none; margin:0; padding:0; border:1px solid var(--rule); border-radius:8px; overflow:hidden}
.gp .lst li{display:flex; align-items:center; gap:10px; padding:10px 12px; border-top:1px solid var(--rule); background:#fff}
.gp .lst li:first-child{border-top:0}
.gp .lst li.empty{color:var(--muted); font-size:13.5px}
.gp .lst .dot{width:10px; height:10px; border-radius:50%; flex:0 0 10px}
.gp .lst li.g .dot{background:var(--good)} .gp .lst li.b .dot{background:var(--bad-dot)}
.gp .lst .nm{flex:1; font-size:15px; font-weight:700; line-height:1.4; color:var(--ink)}
.gp .lst li.g .nm{color:var(--good)} .gp .lst li.b .nm{color:var(--bad)}
.gp .lst .tm{font:600 14px/1.4 var(--ff-num); color:var(--body); white-space:nowrap}
.gp .lst li.now{background:var(--good)} .gp .lst li.b.now{background:var(--bad)}
.gp .lst li.now .nm,.gp .lst li.now .tm{color:#fff} .gp .lst li.now .dot{background:#fff}
.gp .leg{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; line-height:1.6; color:var(--grey); margin:10px 0 0}
.gp .leg span::before{content:""; display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:-1px}
.gp .leg .g::before{background:var(--good)} .gp .leg .b::before{background:var(--bad-dot)}
@media (min-width:900px){
  .gp .segs{display:none}
  .gp .lists{display:grid; grid-template-columns:1fr 1fr; gap:20px}
  .gp .lst{display:block}
  .gp .lst h3{display:flex; align-items:baseline; gap:8px; font-size:17px; line-height:1.5; color:var(--head); margin:0 0 8px}
  .gp .lst h3 small{margin-left:auto; font:600 13px var(--ff-num); color:var(--muted)}
  .gp .lst .nm{font-size:15.5px} .gp .lst .tm{font-size:15px}
  .gp .now b{font-size:22px}
}

/* the calendar's கௌரி நல்ல நேரம், and the link to the day's panchangam */
.gp .feedc{margin:14px 0 0; padding:12px 14px; border-radius:8px; background:#F1F5FD; border:1px solid #C9D8F3}
.gp .feedc>b{display:block; font-size:14px; color:#2F6FD6; margin-bottom:6px}
.gp .feedc>b .en{font-size:12px; font-weight:500; color:var(--muted); margin-left:6px}
.gp .feedc .r{display:flex; justify-content:space-between; padding:4px 0; font-size:14px; color:var(--grey)}
.gp .feedc .r[hidden]{display:none}
.gp .feedc .r b{color:#2F6FD6; font-size:16px}
.gp .nl{display:flex; justify-content:space-between; align-items:center; gap:10px; margin:14px 0 10px; padding:12px 14px; background:#FBEDED; border-radius:8px;
  color:var(--ink); font-weight:600; font-size:14px; line-height:1.5}
.gp .nl span{color:var(--orange); font-size:20px}

/* sections */
.gp .sec{margin:22px 0}
.gp .sec > h2,.gp .sech h2{font-size:17px; margin-bottom:8px}
@media (min-width:900px){.gp .sec > h2,.gp .sech h2{font-size:21px}}
.gp .sech{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:18px 0 8px}
.gp .sech h2{margin:0}

/* tables: the week (names only) and the weekday table */
.gp .tw{overflow-x:auto; margin:0 calc(-1*var(--gutter)); padding:0 var(--gutter)}
.gp .pt{width:100%; border-collapse:collapse; font-size:13.5px; line-height:1.6}
.gp .pt th{background:#FCEFE0; color:#6B4A2B; font-weight:600; text-align:left; padding:9px 10px; font-size:12.5px; white-space:nowrap}
.gp .pt td{padding:8px 10px; border-bottom:1px solid var(--rule); vertical-align:top}
.gp .pt tr.today td,.gp .pt tr.today th{background:#FFF8ED}
.gp .kv2{min-width:520px}
.gp .kv2 .gtxt{color:var(--good); font-weight:600} .gp .kv2 .btxt{color:var(--bad); font-weight:600}
.gp .big{min-width:760px}
.gp .big th{text-align:center}
.gp .big thead th:first-child,.gp .big tbody th{text-align:left; position:sticky; left:0; background:#FCEFE0; z-index:1}
.gp .big tbody th{background:#fff; font-weight:700; color:var(--ink); vertical-align:middle; border-bottom:1px solid var(--rule)}
.gp .big tr.today th{background:#FFF8ED}
.gp .big td{text-align:center; white-space:nowrap; font-size:13px; padding:7px 6px}
.gp .big td.dn{color:var(--muted); font-size:12px; text-align:left}
.gp .big td.g{color:var(--good); font-weight:600} .gp .big td.b{color:var(--bad); font-weight:600}
.gp .big td.cur{background:var(--good) !important; color:#fff} .gp .big td.b.cur{background:var(--bad) !important}
.gp .big td.cur::after{content:'இப்போது'; display:block; font-size:10px; font-weight:600; line-height:1.2; opacity:.9}
.gp .swipe{display:none; font-size:12px; color:var(--muted); margin:6px 0 0; text-align:center}
@media (max-width:800px){.gp .swipe{display:block}}
@media (min-width:900px){.gp .pt{font-size:13.5px} .gp .tw{margin:0; padding:0} .gp .big{min-width:0}}

/* the explanations: folded on phones, open on desktop */
.gp .vs{border:1px solid rgba(198,107,4,.4); border-radius:8px; margin:14px 0; background:#fff}
.gp .vs summary{list-style:none; cursor:pointer; padding:12px 44px 12px 14px; position:relative}
.gp .vs summary::-webkit-details-marker{display:none}
.gp .vs summary h2{font-size:17px; line-height:1.5; color:var(--head); margin:0}
.gp .vs summary::after{content:""; position:absolute; right:18px; top:20px; width:9px; height:9px; border-right:2px solid var(--orange); border-bottom:2px solid var(--orange);
  transform:rotate(45deg); transition:transform .2s}
.gp .vs[open] summary::after{transform:rotate(-135deg); top:24px}
.gp .vs[open] summary{border-bottom:1px solid var(--rule)}
.gp .vs-b{padding:12px 14px 6px}
@media (min-width:900px){.gp .vs{border:0; margin:30px 0 0} .gp .vs summary{padding:0 0 8px; pointer-events:none} .gp .vs summary::after{display:none}
  .gp .vs summary h2{font-size:21px} .gp .vs[open] summary{border:0} .gp .vs-b{padding:0}}
.gp .cyc{background:var(--cream); border:1px solid var(--line); border-radius:8px; padding:10px 14px; text-align:center; font-weight:700; color:var(--orange-ink);
  font-size:14px; line-height:1.8; margin:0 0 12px}
.gp .vs .tw + .rp-note{margin-top:12px}

/* the eight parts */
.gp .vcg{display:grid; grid-template-columns:1fr; gap:12px; margin-top:6px}
@media (min-width:700px){.gp .vcg{grid-template-columns:1fr 1fr; gap:16px}}
.gp .vc{background:#fff; border:1px solid #CFCFCF; border-radius:8px; padding:12px 14px; color:var(--ink)}
.gp .vc-top{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.gp .vc-top .dot{width:12px; height:12px; border-radius:50%; flex:0 0 12px}
.gp .vc.g .dot{background:var(--good)} .gp .vc.b .dot{background:var(--bad-dot)}
.gp .vc-top b{display:block; font-size:15.5px; line-height:1.4}
.gp .vc.g .vc-top b{color:var(--good)} .gp .vc.b .vc-top b{color:var(--bad)}
.gp .vc-top span{display:block; font-size:12.5px; line-height:1.4; color:var(--muted)}
.gp .vc-row{display:grid; grid-template-columns:62px 1fr; gap:8px; font-size:13.5px; line-height:1.7; padding:3px 0}
.gp .vc-row .l{color:var(--muted); font-size:12px; font-weight:600}
.gp .vc-row .ok{color:var(--good)} .gp .vc-row .no{color:var(--bad)}

/* தொடர்புடைய பக்கங்கள் */
.gp .reco{display:grid; grid-template-columns:1fr; gap:10px}
@media (min-width:600px){.gp .reco{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.gp .reco{grid-template-columns:repeat(4,1fr)}}
.gp .reco a{display:flex; align-items:center; gap:12px; background:var(--rose); border-radius:var(--radius-m); padding:10px 12px; color:var(--head); font-weight:700;
  font-size:14px; line-height:1.4}
.gp .reco a .tl{width:44px; height:44px; border-radius:10px; background:#fff; display:grid; place-items:center; color:var(--rose-ink); flex:0 0 auto}
.gp .reco a .tl svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.gp .reco a span.t{flex:1}
.gp .reco a::after{content:"›"; font-size:20px; color:var(--rose-ink)}

/* who wrote it, and the disclaimer */
.gp .rp-author{font-size:13px; line-height:1.8; color:var(--body); margin:18px 0 6px}
.gp .rp-disc{font-size:12px; line-height:1.7; color:#979797; margin:0}
@media (min-width:900px){.gp .rp-author{font-size:14px} .gp .rp-disc{font-size:13px}}