/* KundliAstrology.com — haldi-rangi patrika par kumkum aur kajal.
   Wahi palette jo PDF me hai (ka_web/pdf_vedic_theme.py), taaki parda
   aur kaagaz ek hi cheez dikhein. */

:root{
  --paper:#F4E7CF; --panel:#FCF6EA; --panel-2:#EFDFC4;
  --ink:#2A211C; --ink-2:#6E5B4B; --ink-3:#6F5A47;
  --kumkum:#B21F24; --kumkum-2:#8E181C; --kumkum-wash:#EBD3CC;
  --btn:#B21F24; --btn-2:#8E181C; --on-btn:#FFF6E8;
  --gold:#7E6118; --line:#DBC5A3; --line-2:#C4A87F;
}
/* `--ink-3` carries the hint text and the "why this section is here"
   lines. At #907A64 it measured 4.3:1 against the panel — under the 4.5
   floor for normal-size text, and those lines are exactly the ones a
   reader squints at. #948067 clears it at 4.6:1 without lightening the
   mood of the palette. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#16100D; --panel:#211812; --panel-2:#2C201A;
    --ink:#F2E4CE; --ink-2:#BCA48A; --ink-3:#948067;
    --kumkum:#EA5A4E; --kumkum-2:#F58275; --kumkum-wash:#2E1A17;
    --btn:#C03A32; --btn-2:#9E2A24; --on-btn:#FFF6E8;
    --gold:#CFA646; --line:#3B2B22; --line-2:#513A2D;
  }
}
:root[data-theme="dark"]{
  --paper:#16100D; --panel:#211812; --panel-2:#2C201A;
  --ink:#F2E4CE; --ink-2:#BCA48A; --ink-3:#948067;
  --kumkum:#EA5A4E; --kumkum-2:#F58275; --kumkum-wash:#2E1A17;
  --btn:#C03A32; --btn-2:#9E2A24; --on-btn:#FFF6E8;
  --gold:#CFA646; --line:#3B2B22; --line-2:#513A2D;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink); font-size:17px; line-height:1.65;
  font-family:"Mukta","Nirmala UI","Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background-image:repeating-linear-gradient(180deg, transparent 0 37px,
      color-mix(in srgb, var(--line) 26%, transparent) 37px 38px);
}
h1,h2,h3{font-family:"Tiro Devanagari Hindi","Nirmala UI",Georgia,serif;
  font-weight:400; line-height:1.25; text-wrap:balance; margin:0; letter-spacing:.005em}
p{margin:0}
a{color:var(--kumkum)}
:focus-visible{outline:3px solid var(--kumkum); outline-offset:3px}

.wrap{width:min(1080px, 100% - 2rem); margin-inline:auto}
.wrap.narrow{width:min(780px, 100% - 2rem)}

.rule{display:flex; align-items:center; gap:.85rem;
  margin-block:clamp(2.2rem,5vw,3.4rem); color:var(--line-2)}
.rule::before,.rule::after{content:""; flex:1; height:4px;
  border-top:1px solid currentColor; border-bottom:1px solid currentColor}
.rule i{width:11px; height:11px; background:var(--kumkum); transform:rotate(45deg); flex:none}

/* head */
.top{position:sticky; top:0; z-index:40; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--paper) 93%, transparent); backdrop-filter:blur(9px)}
.top .wrap{display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:66px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink);
  font-family:"Tiro Devanagari Hindi",Georgia,serif; font-size:1.14rem}
.brand b{font-weight:400; color:var(--kumkum)}
.langs{display:flex; gap:.35rem; flex-wrap:wrap}
.lang{min-height:38px; display:inline-flex; align-items:center; padding:.2rem .7rem;
  font-size:.95rem; text-decoration:none; color:var(--ink-2);
  border:1px solid var(--line-2); background:var(--panel)}
.lang.on{color:var(--kumkum); border-color:var(--kumkum); border-width:2px; background:var(--kumkum-wash)}

/* hero */
.hero{padding-block:clamp(1.8rem,5vw,3rem) 0}
.eyebrow{font-size:.83rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--kumkum); margin-bottom:.8rem}
h1{font-size:clamp(1.9rem,5.4vw,2.9rem)}
.sub{margin-top:.9rem; color:var(--ink-2); font-size:clamp(1rem,2.2vw,1.15rem); max-width:56ch}
.sub.small{font-size:.98rem}

/* cards */
.cards{display:grid; grid-template-columns:1fr; gap:1.1rem}
@media (min-width:720px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{display:flex; gap:1rem; padding:1.4rem; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--line-2); box-shadow:4px 4px 0 var(--line);
  transition:transform .14s ease, box-shadow .14s ease}
.card:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--line-2)}
.card-lead{border-color:var(--kumkum); border-width:2px}
.card .ic{flex:none; width:46px; height:46px; display:grid; place-items:center; color:var(--kumkum)}
.card h2{font-size:1.24rem; margin-bottom:.2rem}
.card .tag{font-size:.9rem; color:var(--kumkum); font-weight:600}
.card .blurb{margin-top:.5rem; font-size:.97rem; color:var(--ink-2)}
.pill{display:inline-block; margin-top:.6rem; font-size:.76rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--on-btn);
  background:var(--kumkum); padding:.2rem .55rem}

.note h2{font-size:1.5rem; margin-bottom:.9rem}
.ticks{margin:0; padding-left:1.1rem; color:var(--ink-2)}
.ticks li{margin-block:.35rem}

/* form */
.form{margin-top:1.6rem; background:var(--panel); border:1px solid var(--line-2);
  box-shadow:5px 5px 0 var(--line)}
.form-head{padding:1rem 1.4rem; border-bottom:1px solid var(--line); background:var(--panel-2)}
.form-head h2{font-size:1.3rem}
.fields{display:grid; grid-template-columns:1fr; gap:0}
@media (min-width:620px){.fields{grid-template-columns:1fr 1fr} .f-wide{grid-column:1/-1}}
.field{padding:1.1rem 1.4rem; border-bottom:1px solid var(--line)}
@media (min-width:620px){.field:nth-child(2n){border-left:1px solid var(--line)}}
.field label{display:block; font-weight:700; margin-bottom:.45rem}
.field input[type=text],.field input[type=date],.field input[type=time],.field input[type=number]{
  width:100%; min-height:52px; padding:.55rem .8rem; font:inherit; font-size:1.06rem;
  color:var(--ink); background:var(--paper); border:1.5px solid var(--line-2); border-radius:0}
.field input:focus-visible{border-color:var(--kumkum)}
.triple{display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem}
.hint{margin-top:.5rem; font-size:.92rem; color:var(--ink-3)}
.hint button{font:inherit; font-size:.92rem; color:var(--kumkum); background:none;
  border:0; padding:0; text-decoration:underline; text-underline-offset:3px; cursor:pointer}

.pick{display:flex; gap:.6rem; flex-wrap:wrap}
.pickbtn{flex:1 1 130px; min-height:60px; display:flex; align-items:center; justify-content:center;
  gap:.5rem; font-weight:600; color:var(--ink-2); background:var(--paper);
  border:1.5px solid var(--line-2); cursor:pointer; padding:.5rem}
.pickbtn input{accent-color:var(--kumkum); width:18px; height:18px}
.pickbtn:has(input:checked){color:var(--kumkum); background:var(--kumkum-wash);
  border-color:var(--kumkum); border-width:2.5px}

.form-foot{padding:1.4rem; display:flex; flex-direction:column; gap:.7rem}
.go{width:100%; min-height:64px; font:inherit; font-size:1.22rem; font-weight:700;
  color:var(--on-btn); background:var(--btn); border:0; box-shadow:4px 4px 0 var(--btn-2);
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease}
.go:hover{background:var(--btn-2)}
.go:active{transform:translate(4px,4px); box-shadow:0 0 0 var(--btn-2)}
.foot-note{text-align:center; font-size:.93rem; color:var(--ink-3)}

.error{margin-top:1.2rem; padding:.9rem 1.1rem; background:var(--kumkum-wash);
  border:2px solid var(--kumkum); color:var(--ink)}

/* where a form will be once KA_KUNDLI_OPEN is set */
.soon{margin-top:1.6rem; padding:1.2rem 1.4rem; background:var(--panel);
  border:1px solid var(--line-2); border-left:4px solid var(--gold);
  box-shadow:5px 5px 0 var(--line)}
.soon h2{font-size:1.25rem}
.soon p{margin-top:.55rem; color:var(--ink-2); max-width:62ch}
.soon a{color:var(--kumkum); font-weight:600; text-underline-offset:3px}

/* verdict */
.verdict{margin-top:1.6rem; padding:1.4rem; background:var(--panel);
  border:1px solid var(--line-2); box-shadow:5px 5px 0 var(--line)}
.verdict .big{font-size:1.14rem; font-weight:600}
.verdict h3{font-size:1.15rem; margin-top:1.4rem; margin-bottom:.5rem}
.meta{margin-top:.7rem; font-size:.93rem; color:var(--ink-3)}
.caution{margin-top:1rem; padding:.8rem 1rem; background:var(--paper);
  border-left:4px solid var(--kumkum); font-size:.98rem}

.bars{margin-top:1.1rem; display:flex; flex-direction:column; gap:.55rem}
.barrow{display:grid; grid-template-columns:minmax(7rem,10rem) 1fr auto;
  gap:.7rem; align-items:center}
.bl{font-weight:600; font-size:.97rem}
.bn{font-size:.9rem; color:var(--ink-3); font-variant-numeric:tabular-nums}
.bar{display:block; height:.75rem; background:var(--panel-2);
  border:1px solid var(--line-2); overflow:hidden}
.bar i{display:block; height:100%}
.tone-a i{background:var(--kumkum)}
.tone-b i{background:var(--gold)}
/* Sarvashtakavarga rows colour by the classical thresholds — 28 and above
   is a strong sign, below 25 a weak one — so the eye finds the strong and
   weak houses without reading twelve numbers. Everything between keeps the
   neutral fill. */
.bar i{background:var(--ink-3)}
.bar.good i{background:var(--gold)}
.bar.bad i{background:var(--kumkum)}

/* tables */
/* `display:block` was needed for overflow-x, but it also makes the table
   shrink to its content and leave a wide empty gutter. Wrap the scroll on
   an outer element instead and let the table be a table. */
.tablewrap{overflow-x:auto; margin-top:.9rem}
.grid{width:100%; border-collapse:collapse; font-size:.96rem;
  background:var(--panel); table-layout:auto}
.grid{margin-top:.9rem}
.tablewrap>.grid{margin-top:0}
.grid thead th{text-align:left; background:var(--panel-2); font-weight:700}
.grid th,.grid td{border:1px solid var(--line); padding:.55rem .7rem; vertical-align:top}
.grid tbody tr:nth-child(even){background:var(--paper)}
.grid .side{color:var(--kumkum); font-weight:600; white-space:nowrap}

.getpdf h2{font-size:1.45rem; margin-bottom:.8rem}
.getpdf form{max-width:26rem}
.back{margin-block:2rem 0}
.back a{text-decoration:none; font-weight:600}

/* foot */
.bottom{margin-top:clamp(2.6rem,6vw,4rem); padding-block:2rem 2.6rem;
  border-top:1px solid var(--line); text-align:center}
.bottom .dom{font-family:"Tiro Devanagari Hindi",Georgia,serif;
  font-size:1.3rem; color:var(--kumkum)}
.bottom p+p{margin-top:.4rem; color:var(--ink-3); font-size:.94rem}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.001ms !important}
}

/* ── skip link ─────────────────────────────────────────────────── */
.skip{position:absolute; left:-9999px; top:0; z-index:100; padding:.7rem 1rem;
  background:var(--kumkum); color:var(--on-btn); font-weight:700}
.skip:focus{left:0}

/* ── language switch as buttons (result page re-posts) ─────────── */
.langf{display:inline}
.langf .lang{font:inherit; cursor:pointer}

/* ── kundli chart ──────────────────────────────────────────────── */
.chartwrap{display:grid; grid-template-columns:1fr; gap:1.4rem; align-items:start; margin-top:1rem}
/* `1fr` made the second column take all the remaining width, and the
   table's own cream background filled it — so a six-row table looked
   like it had a third, empty column. Both columns size to their content
   and the row stops where the table stops. */
@media (min-width:720px){
  .chartwrap{grid-template-columns:auto auto; justify-content:start}
}
.chartbox{margin:0; padding:1rem; background:var(--panel);
  border:1px solid var(--line-2); box-shadow:4px 4px 0 var(--line)}
.chartbox svg{display:block; max-width:100%; height:auto}
.chartbox figcaption{margin-top:.7rem; font-size:.92rem; color:var(--ink-2); text-align:center}
.kundli .k-edge{fill:none; stroke:var(--ink); stroke-width:1.4}
.kundli .k-line{fill:none; stroke:var(--chart-line, #B08F63); stroke-width:.8}
.kundli .k-rashi{fill:var(--kumkum); font-size:5px; font-weight:700; text-anchor:middle}
.kundli .k-planet{fill:var(--ink); font-size:4.4px; text-anchor:middle}
.kundli .k-more{fill:var(--ink-3); font-size:3.6px; text-anchor:middle}
:root{--chart-line:#B08F63}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--chart-line:#7E5C46}}
:root[data-theme="dark"]{--chart-line:#7E5C46}

/* ── table extras ──────────────────────────────────────────────── */
.grid .num{font-variant-numeric:tabular-nums; white-space:nowrap}
/* `table-layout:auto` sized these to their content and left the rest of
   the panel empty inside the border — which reads as a third, blank
   column. Fixed layout makes the two columns share the width. */
/* Sized to its own content. `width:100%` left a sliver of the table's
   cream background sticking out past the last cell. */
.grid.kv{width:max-content; max-width:100%}
.grid.kv th{text-align:left; white-space:nowrap; background:var(--panel-2)}
.grid.kv td{word-break:break-word}

/* The child's chart is a fixed-width SVG in a full-width panel. Left
   alone it sat hard against the left edge with a wide empty field beside
   it, which looks like a failed image rather than a centred diagram. */
.chartbox{display:flex; flex-direction:column; align-items:center}
.chartbox svg{margin-inline:auto}
.grid tr.now{background:var(--kumkum-wash)}
.badge{margin-left:.4rem; font-size:.74rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--on-btn); background:var(--kumkum); padding:.1rem .4rem}
.retro{color:var(--kumkum); font-weight:700}
.dim{color:var(--ink-3)}
section+section{margin-top:1.8rem}
section h2{font-size:1.5rem; margin-bottom:.4rem}
section h3{font-size:1.2rem; margin-top:1.2rem; margin-bottom:.3rem}

/* ── print: the reading should survive a printer ───────────────── */
@media print{
  .top,.bottom,.getpdf,.back,.skip{display:none}
  body{background:#fff; color:#000; background-image:none}
  .verdict,.chartbox,.grid{box-shadow:none; border-color:#999}
  a{color:#000; text-decoration:none}
}

/* ══ the topical layer ══════════════════════════════════════════════
   The category pages read the whole chart through one subject. These
   are the pieces that layer adds: a bhava card, a pass/fail checklist,
   a planet's trades, and the small "why this is here" line that runs
   under every heading. Same patrika palette as the rest — squared
   panels, double hairline, kumkum for the heading rule. */

.lede{color:var(--ink-2); font-size:.94rem; line-height:1.6;
      margin:.15rem 0 1rem; max-width:62ch}

.big{font-family:'Tiro Devanagari Hindi',serif; font-size:1.9rem;
     color:var(--kumkum); margin:.4rem 0 .9rem; line-height:1.2}
.big .grade{font-family:'Mukta',system-ui,sans-serif; font-size:.82rem;
            color:var(--ink-2); margin-inline-start:.6rem;
            letter-spacing:.02em}
h3 .grade{font-size:.78rem; color:var(--ink-2); font-weight:400;
          margin-inline-start:.45rem}

/* one house, as a card */
.bhava, .dosha, .planetfield{
  border:1px solid var(--line); background:var(--panel);
  box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--line);
  padding:.95rem 1.05rem; margin:.75rem 0}
.bhava h3, .dosha h3, .planetfield h3{
  margin:0 0 .55rem; font-size:1.02rem; display:flex; flex-wrap:wrap;
  align-items:baseline; gap:.4rem}
/* The diamond is the SHAPE; the number inside it must stay upright.
   Rotating the span rotated the digit with it, so the first thing to
   read on every bhava card sat at forty-five degrees. The span turns,
   an inner element turns back. */
.bhava .bnum{display:inline-grid; place-items:center; width:1.7rem;
  height:1.7rem; background:var(--kumkum); color:var(--on-btn);
  font-size:.8rem; font-weight:700; transform:rotate(45deg);
  border-radius:2px; flex:none; line-height:1}
.bhava .bnum > i{display:block; transform:rotate(-45deg); font-style:normal}
.bhava .why{color:var(--ink-2); font-weight:400; font-size:.9rem}

.kv{display:grid; grid-template-columns:auto 1fr; gap:.28rem .9rem;
    margin:0 0 .5rem; font-size:.92rem}
.kv dt{color:var(--ink-2)}
.kv dd{margin:0}

.tag{display:inline-block; font-size:.74rem; letter-spacing:.06em;
     text-transform:uppercase; margin:.55rem 0 .25rem; padding:.1rem .45rem;
     border:1px solid var(--line-2)}
.tag.good{color:var(--gold)}
.tag.bad{color:var(--kumkum)}

.pts{margin:.2rem 0 .1rem; padding-inline-start:1.1rem; font-size:.92rem;
     line-height:1.62; color:var(--ink)}
.pts li{margin:.12rem 0}

.checks{list-style:none; margin:.5rem 0 0; padding:0}
.checks li{display:grid; grid-template-columns:1.5rem 1fr; gap:.1rem .55rem;
  padding:.5rem 0; border-top:1px solid var(--line)}
.checks li:first-child{border-top:0}
.checks li b{grid-column:2; font-weight:600}
.checks li span{grid-column:2; color:var(--ink-2); font-size:.9rem}
.checks li::before{grid-row:1 / span 2; align-self:start;
  font-size:1rem; line-height:1.35}
.checks li.pass::before{content:"✓"; color:var(--gold)}
.checks li.fail::before{content:"✗"; color:var(--kumkum)}

@media print{
  .bhava, .dosha, .planetfield{break-inside:avoid; box-shadow:none}
}

/* ══ the verification probe ═════════════════════════════════════════
   One question per card, because four questions in a list get skimmed
   and answered carelessly — and a careless answer here is worse than
   none, since the whole point is a check the visitor can trust. */
.qcard{border:1px solid var(--line); background:var(--panel);
  box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--line);
  padding:1rem 1.1rem; margin:.9rem 0}
.qcard legend{font-family:'Tiro Devanagari Hindi',serif; color:var(--kumkum);
  font-size:.95rem; padding:0 .4rem}
.qcard .qtext{font-size:1.04rem; line-height:1.65; margin:.35rem 0 .8rem}
.qcard .pick{margin-bottom:.5rem}
.qcard .hint{margin:0; font-size:.82rem}

/* a kuta that scored nothing is the row that decides a match */
.grid tr.zero td{background:var(--kumkum-wash)}
.grid tr.zero td:first-child{box-shadow:inset 3px 0 0 var(--kumkum)}

/* A nested reading inside a section — the child's kundli puts a good deal
   of its prose one or two levels down (upbringing.prakriti, saath.hard[],
   upay.lines[]). Indented rather than boxed: these are continuations of
   the section above, not sections of their own. */
.subblock{margin:.7rem 0 .7rem 1rem; padding-left:.9rem;
  border-left:2px solid var(--line)}
.subblock h4{margin:.2rem 0 .3rem; font-size:.98rem; color:var(--kumkum)}
.subblock p{margin:.25rem 0}
.subblock .tag{margin:.45rem 0 .15rem}

/* a child's full kundli: the later-life readings are said to be later-life */
.minor-note{margin-top:1.2rem; padding:.9rem 1.1rem; background:var(--panel);
  border:1px solid var(--line-2); border-left:4px solid var(--kumkum);
  color:var(--ink-2)}

/* the candidates for a shared place name, or summer / standard time */
.choices{display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0 1rem}
.choice{font:inherit; padding:.55rem .85rem; border:1px solid var(--kumkum);
  background:var(--panel); color:var(--ink); cursor:pointer; text-align:left}
.choice:hover,.choice:focus{background:var(--kumkum-wash)}
.credit{font-size:.8rem; color:var(--ink-2)}
.busy{margin-top:.5rem; font-size:.9rem; color:var(--ink-2)}

/* privacy, terms, contact (templates/info.html) */
.prose{margin:1.2rem 0 2.5rem}
.prose h2{font-size:1.12rem; margin:1.6rem 0 .45rem}
.prose p{line-height:1.75; max-width:68ch}
.bottom .legal{margin-top:.5rem; font-size:.9rem}
.bottom .legal a{color:inherit}