/* Search pages: same paper, ink and turmeric as the app. The day bar on the
   panchang page is the one bold element; everything else stays quiet. */
.seo-main { padding-block: 1.4rem 3rem; max-width: 46rem; margin-left: max(1.25rem, (100% - 1180px) / 2); }
.seo-langs { display: flex; gap: .2rem; }
.seo-langs a { color: var(--neel); text-decoration: none; padding: .25rem .7rem; border-radius: 999px; font-size: var(--step--1); border: 1.5px solid transparent; }
.seo-langs a[aria-current] { border-color: var(--neel); }
.crumbs { font-size: var(--step--1); color: var(--rakh); margin-bottom: .9rem; }
.crumbs a { color: var(--neel-soft); }
.seo h1 { font-size: var(--step-3); }
.seo-lede { font-size: var(--step-1); color: var(--neel-soft); margin-top: .7rem; line-height: 1.45; max-width: 38em; }
.seo-lede:empty { display: none; }
.dateline { margin-top: .9rem; font-size: var(--step--1); color: var(--rakh); }
.seo h2 { font-size: var(--step-1); margin-top: 2rem; }

.prose { margin-top: .6rem; line-height: 1.65; }
.prose p, .prose ul { margin-top: .75rem; }
.prose li + li { margin-top: .3rem; }

/* call to action */
.cta-card { margin-top: 1.6rem; padding: 1rem 1.1rem; background: #FFF4D6; border: 1px solid var(--patra-line); border-left: 4px solid var(--haldi);
  border-radius: var(--radius); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1rem; }
.cta-line { color: var(--neel-soft); font-size: var(--step--1); }
.cta-btn { display: inline-block; background: var(--neel); color: var(--patra); text-decoration: none; border: 0; cursor: pointer;
  padding: .65rem 1.25rem; border-radius: 999px; font-size: var(--step-0); font-weight: 500; }
.cta-btn:hover { background: var(--neel-soft); }

/* facts list */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.4rem; margin: 1.2rem 0 0; }
.facts dt { color: var(--neel-soft); }
.facts dd { margin: 0; font-weight: 500; }

/* the day bar: sunrise to sunset, Rahu kaal in sindoor, Abhijit in mehendi */
.daybar { margin: 1.1rem 0 0; }
.daybar-track { position: relative; height: 2.4rem; border-radius: var(--radius);
  background: linear-gradient(90deg, #F7D98A 0%, #FFF0C2 30%, #FFF6DA 50%, #FFF0C2 70%, #F2C76B 100%);
  border: 1px solid var(--haldi-deep); overflow: hidden; }
.daybar .seg { position: absolute; top: 0; bottom: 0; }
.daybar .seg.bad { background: repeating-linear-gradient(135deg, var(--sindoor) 0 6px, #C9443C 6px 12px); opacity: .9; }
.daybar .seg.good { background: var(--mehendi); }
.daybar .now-pin { position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -1.5px; background: var(--neel); }
.daybar .now-pin::after { content: ""; position: absolute; top: -5px; left: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--neel); }
.daybar figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; margin-top: .45rem; font-size: var(--step--1); color: var(--neel-soft); }
.daybar .key::before { content: ""; display: inline-block; width: .8em; height: .8em; border-radius: 2px; margin-right: .35em; vertical-align: -.05em; }
.daybar .key.bad { color: var(--sindoor); } .daybar .key.bad::before { background: var(--sindoor); }
.daybar .key.good { color: var(--mehendi); } .daybar .key.good::before { background: var(--mehendi); }

/* time tables */
.t-times td:first-child { font-family: var(--sans); font-size: var(--step-0); font-variant-numeric: tabular-nums; width: 8.5em; }
.t-times tr.ok td:last-child { color: var(--mehendi); font-weight: 500; }
.t-times tr.is-now td { background: #FFF4D6; }
.now-tag { display: inline-block; background: var(--neel); color: var(--patra); border-radius: 999px; padding: 0 .55rem; font-size: .8rem; font-weight: 500; }
.note { margin-top: 1.4rem; color: var(--rakh); font-size: var(--step--1); }

/* lists of places and rashis */
.city-grid { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.city-grid a { display: block; padding: .45rem .9rem; border: 1.5px solid var(--neel); border-radius: 999px; color: var(--neel); text-decoration: none; }
.city-grid a:hover { background: var(--neel); color: var(--patra); }
.city-grid.small a { padding: .25rem .7rem; font-size: var(--step--1); border-width: 1px; }

.rashi-grid { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .7rem; }
.rashi-grid a { display: grid; gap: .2rem; height: 100%; padding: .9rem 1rem; border: 1px solid var(--patra-line); border-radius: var(--radius);
  background: #fff; color: var(--neel); text-decoration: none; }
.rashi-grid a:hover { border-color: var(--neel); }
.r-name { font-family: var(--serif); font-size: var(--step-2); line-height: 1.1; }
.r-letters { font-size: .8rem; color: var(--rakh); }
.r-line { font-size: var(--step--1); color: var(--neel-soft); margin-top: .2rem; }

.reading { margin-top: 1.1rem; font-size: var(--step-1); line-height: 1.6; }
.reading p { max-width: 38em; }

/* sade sati table */
.table-wrap { overflow-x: auto; margin-top: 1.2rem; }
.sade th[scope="row"] { font-family: var(--serif); font-size: var(--step-1); font-weight: 400; white-space: nowrap; padding-right: 1rem; }
.sade th[scope="row"] a { color: var(--neel); }
.sade td:first-of-type { font-family: var(--sans); font-size: var(--step--1); white-space: normal; }
.sade td { font-size: var(--step--1); }
.sade tr.is-now td:last-child { color: var(--sindoor); font-weight: 500; }

/* numerology tool */
.num-tool { margin-top: 1.4rem; display: grid; gap: .8rem; max-width: 26rem; }
.num-tool label { display: grid; gap: .25rem; font-size: var(--step--1); color: var(--neel-soft); }
.num-tool input { padding: .6rem .7rem; border: 1.5px solid var(--neel); border-radius: var(--radius); background: #fff; font-size: var(--step-0); }
.num-tool .cta-btn { justify-self: start; }
.num-out:empty { display: none; }
.num-out { display: block; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--patra-line); border-radius: var(--radius); }
.num-meaning { font-family: var(--serif); font-size: var(--step-1); }
.num-grid { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: .8rem 0 0; }
.num-grid dt { color: var(--neel-soft); } .num-grid dd { margin: 0; font-weight: 500; }

/* FAQ and explore */
.faq details { border-bottom: 1px solid var(--patra-line); padding-block: .7rem; }
.faq summary { cursor: pointer; font-weight: 500; }
.faq details p { margin-top: .45rem; color: var(--neel-soft); }
.explore { margin-top: 2.6rem; padding-top: 1.2rem; border-top: 2px solid var(--neel); }
.explore h2 { margin-top: 0; }
.explore ul { list-style: none; padding: 0; margin: .7rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .4rem 1.2rem; }
.explore a { color: var(--neel); }

@media (max-width: 560px) {
  .seo-main { margin-inline: auto; }
  .facts { grid-template-columns: 1fr 1fr; }
  .cta-card { flex-direction: column; align-items: stretch; text-align: center; }
  .seo-langs a { padding: .2rem .45rem; }
}
.sade tbody th[scope="row"] { border-bottom: 1px solid var(--patra-line); padding-block: .55rem; vertical-align: top; }