/* Server-rendered search pages (/panchang/<city>, /rashi, /rashifal, /nakshatra, /sade-sati,
   /manglik and their /hi/ twins). Load after shell.css, which owns the tokens, top bar, tab bar,
   footer, type scale and buttons; this file holds only the page body. */
.seo-main { max-width:880px; margin:0 auto; padding:32px var(--gutter) 0 }
.seo-main h1 { font-size:var(--fs-1); text-wrap:balance }
.seo-main h2 { font-family:var(--serif); font-weight:600; font-size:var(--fs-3); line-height:1.25; margin:0 0 10px }
.seo-main > h2 { margin:40px 0 14px }
.seo-main h3 { font-size:var(--fs-4); font-weight:600; margin:22px 0 6px }
.seo-main p, .seo-main li { line-height:1.65 }
.seo-main .muted { color:var(--muted); margin:0 0 24px; max-width:68ch }
.seo-main .note { color:var(--muted); font-size:var(--fs-6); }
.seo-main .fact-line { color:var(--muted); font-size:var(--fs-6); margin:4px 0 10px }

/* Cards */
.seo-main section { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 26px; margin:16px 0 }
.seo-main section > :last-child { margin-bottom:0 }
.seo-main section > h2:first-child, .seo-main section > p:first-child { margin-top:0 }
.beta { display:inline-block; margin-left:8px; padding:2px 10px; border-radius:999px; background:var(--teal-soft); color:var(--teal); font-family:var(--sans); font-size:var(--fs-7); font-weight:600; letter-spacing:.06em; text-transform:uppercase; vertical-align:middle }
:lang(hi) .beta { letter-spacing:0; text-transform:none }

/* Tables */
.table-scroll { overflow-x:auto }
.seo-main table { border-collapse:collapse; width:100%; font-size:var(--fs-5); }
.seo-main th, .seo-main td { text-align:left; padding:10px 10px 10px 0; border-bottom:1px solid var(--line); vertical-align:top }
.seo-main tbody tr:last-child td { border-bottom:0 }
.seo-main th { font-size:var(--fs-7); font-weight:600; color:var(--muted); letter-spacing:.06em; text-transform:uppercase }
:lang(hi) .seo-main th { font-size:var(--fs-6); letter-spacing:0; text-transform:none }
.seo-main td a { display:inline-flex; align-items:center; min-height:40px; margin:-10px 0 }

/* Links: chips for the sign, city and nakshatra lists; 44 px rows for the rest */
.seo-main ul.links { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; list-style:none }
.seo-main ul.links a { display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink); font-size:var(--fs-5); text-decoration:none }
.seo-main section ul.links a { background:var(--paper) }
.seo-main ul.links a:hover { border-color:var(--saffron); color:var(--saffron) }
.seo-main > p > a, .seo-main nav.pager a { display:inline-flex; align-items:center; min-height:44px; text-underline-offset:3px }
.seo-main nav.pager { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; margin:16px 0 }
a.lang-toggle { text-decoration:none }

/* Call to action: the landing page's night-sky band with the gold button */
.seo-main section.cta { background:var(--sky); border-color:var(--sky); color:var(--sky-text); margin-top:40px; padding:28px }
.seo-main .cta h2 { color:var(--sky-text); font-size:var(--fs-2); }
.seo-main .cta p { color:var(--sky-muted); max-width:60ch }
.seo-main .cta a.gold-button { display:inline-flex; align-items:center; text-decoration:none }

/* Manglik checker */
form.check { display:grid; gap:14px; max-width:440px }
form.check label { display:grid; gap:6px; font-weight:600; font-size:var(--fs-5); }
form.check label.inline { display:flex; gap:10px; align-items:center; min-height:44px; font-weight:400 }
form.check input { min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); font-weight:400 }
form.check input[type=checkbox] { width:18px; height:18px; min-height:0; accent-color:var(--teal) }
form.check button[type=submit] { justify-self:start }
ul.places { list-style:none; padding:0; margin:-6px 0 0 }
ul.places button { min-height:44px; width:100%; padding:8px 4px; border:0; border-bottom:1px solid var(--line); background:none; color:var(--saffron); text-align:left }
#mk-result:not(:empty) { margin-top:18px; padding-top:6px; border-top:1px solid var(--line) }

@media(max-width:767px) {
  .seo-main { padding-top:22px }
  .seo-main h1 { font-size:var(--fs-1); }
  .seo-main h2 { font-size:var(--fs-3); }
  .seo-main section { padding:16px 16px; border-radius:16px }
  .seo-main section.cta { padding:22px 18px }
  .seo-main table { font-size:var(--fs-6); }
  .seo-main ul.links a { padding:8px 14px; font-size:var(--fs-5); }
}