/* The birth-detail calculators — /nakshatra-calculator/, /lagna-calculator/,
   /dasha-calculator/, /numerology-calculator/. One stylesheet, four tools; the
   markup all comes from assets/js/calc-tool.js. */

.cx-form{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;max-width:640px;
  box-shadow:0 2px 0 rgba(255,255,255,.6) inset,0 10px 26px rgba(31,24,18,.06)}
.cx-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cx-field{margin-bottom:12px;min-width:0}
.cx-field label{display:block;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px}
.cx-field input{width:100%;min-width:0;padding:11px 13px;border-radius:9px;background:var(--paper);
  border:1px solid var(--line);color:var(--ink);font:inherit;font-size:16px;transition:.14s}
.cx-field input:focus{outline:none;border-color:var(--saffron);box-shadow:0 0 0 3px rgba(200,134,44,.14)}
.cx-go{width:100%;margin-top:4px;padding:13px;border-radius:10px;color:#fff;font-weight:700;font-size:16.5px;
  background:linear-gradient(180deg,var(--saffron-2),var(--crimson));box-shadow:0 8px 20px rgba(168,51,30,.2);transition:.16s}
.cx-go:hover{transform:translateY(-1px)}
.cx-tz{font-size:13.5px;color:var(--ink-mute);margin-top:10px;text-align:center}

.cx-out{margin-top:20px;max-width:820px}
.cx-busy,.cx-err{padding:18px;border-radius:12px;background:var(--card);border:1px solid var(--line);
  text-align:center;font-size:16px;color:var(--ink-3)}
.cx-busy{font-style:italic;color:var(--ink-mute)}
.cx-err{color:var(--crimson);border-color:var(--crimson)}

.cx-hero{background:linear-gradient(155deg,rgba(200,134,44,.14),var(--card));border:1px solid var(--line);
  border-left:4px solid var(--saffron);border-radius:16px;padding:20px 22px}
.cx-cap{font-size:12.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-mute)}
.cx-hero h3{font-family:var(--serif);font-size:clamp(24px,3.2vw,32px);font-weight:700;color:var(--ink);
  line-height:1.12;margin-top:6px}
.cx-dev{color:var(--crimson);font-weight:600}
.cx-sub{font-size:16px;color:var(--ink-2);margin-top:6px;line-height:1.5}
.cx-bar{height:8px;border-radius:99px;background:var(--paper-3);margin-top:14px;overflow:hidden}
.cx-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--saffron),var(--crimson))}

.cx-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:16px}
.cx-f{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 15px;min-width:0}
.cx-f.wide{grid-column:1/-1}
.cx-f dt{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.cx-f dd{font-size:16.5px;font-weight:600;color:var(--ink);margin-top:4px;line-height:1.45;overflow-wrap:anywhere}
.cx-f dd strong{color:var(--crimson)}

.cx-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.cx-t{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--saffron);
  border-radius:12px;padding:16px 18px;min-width:0}
.cx-t h4{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--ink)}
.cx-t p{font-size:16px;color:var(--ink-3);line-height:1.65;margin-top:6px}

.cx-note{font-size:16px;color:var(--ink-3);line-height:1.68;margin-top:15px}
.cx-note em{color:var(--ink-2)}

/* the dasha timeline scrolls on its own rather than widening the page */
.cx-tablewrap{margin-top:16px;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.cx-table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:440px}
.cx-table th{text-align:left;padding:11px 14px;font-size:12.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mute);border-bottom:1px solid var(--line)}
.cx-table td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.cx-table tbody tr:last-child td{border-bottom:0}
.cx-table tr.on td{background:linear-gradient(90deg,rgba(200,134,44,.16),transparent);color:var(--ink);font-weight:600}
.cx-table tr.on td:first-child{box-shadow:inset 3px 0 0 var(--saffron)}

.cx-cta{display:inline-block;margin-top:18px;padding:13px 24px;border-radius:10px;
  background:linear-gradient(180deg,var(--saffron-2),var(--crimson));color:#fff;font-weight:700;font-size:16.5px;
  box-shadow:0 8px 20px rgba(168,51,30,.2)}

@media(max-width:760px){
  .cx-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-two{grid-template-columns:1fr}
}
@media(max-width:560px){
  .cx-row{grid-template-columns:1fr}
  .cx-facts{grid-template-columns:1fr}
}

/* Breadcrumb + the "how / more" blocks. These live inline on the older answer
   pages; the generated pages get them from a stylesheet instead so twelve or
   four pages cannot drift apart. Deliberately NOT added to dense.css — the
   answer pages already carry their own copies and two definitions of the same
   class in the cascade is worse than one duplicated block here. */
.crumb{font-size:14px;color:var(--ink-mute);margin-bottom:12px}
.crumb a{color:var(--ink-3);font-weight:600}
.crumb a:hover{color:var(--crimson)}
.crumb span{margin:0 5px;color:var(--line)}
.crumb span:last-child{margin:0;color:var(--ink-mute)}

.qa-how{display:grid;gap:13px}
.qa-h{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  border-left:3px solid var(--saffron)}
.qa-h h3{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--ink)}
.qa-h p{font-size:16px;color:var(--ink-3);line-height:1.65;margin-top:6px}
.qa-band{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--ink);color:var(--paper);border-radius:14px;padding:20px 24px}
.qa-band b{font-family:var(--serif);font-size:19px;color:var(--glow);display:block}
.qa-band span{font-size:15px;color:var(--paper-3)}
.qa-band a{flex-shrink:0;padding:12px 22px;border-radius:9px;background:var(--glow);color:var(--ink);
  font-weight:700;font-size:16px}
.qa-next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.qa-next a{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:var(--card);
  border:1px solid var(--line);min-width:0;transition:.15s}
.qa-next a:hover{border-color:var(--saffron);transform:translateY(-2px);box-shadow:0 12px 26px rgba(31,24,18,.10)}
.qa-next .ic{font-size:22px;flex-shrink:0}
.qa-next .q{font-size:16px;font-weight:600;color:var(--ink);line-height:1.28;min-width:0}
.qa-next .ar{margin-left:auto;color:var(--saffron);font-weight:800;font-size:18px}
@media(max-width:900px){.qa-next{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.qa-next{grid-template-columns:1fr}}

/* zodiac / planet glyphs beside names, gold so they read as wayfinding */
.zg{color:var(--saffron);margin-right:5px;font-weight:400}

/* Wealth score hero. The founder wanted a number with impact; this is that
   number, and it is a computed score out of 100, never a rupee amount. */
.wx-score{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:8px}
.wx-n{display:flex;align-items:baseline;gap:5px}
.wx-big{font-family:var(--serif);font-size:clamp(46px,8vw,72px);font-weight:700;line-height:1;
  color:var(--saffron);letter-spacing:-.02em}
.wx-of{font-size:16px;font-weight:600;color:var(--ink-mute)}
.wx-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.wx-band{font-size:13px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--glow)}
.wx-pct{font-size:15.5px;color:var(--ink-2)}
.wx-pct b{color:var(--crimson)}
.wx-bar{height:9px;border-radius:99px;background:var(--paper-3);margin-top:14px;overflow:hidden}
.wx-bar span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--saffron),var(--glow));
  transition:width 1.1s cubic-bezier(.3,.9,.35,1)}
@media(max-width:480px){.wx-score{gap:12px}}

/* The app hook. Deliberately the loudest block after the score: it carries a
   real date from the reader's own chart, so it earns the emphasis. */
.wx-next{margin-top:18px;padding:20px 22px;border-radius:16px;
  background:linear-gradient(150deg,rgba(224,179,78,.16),var(--card));
  border:1px solid var(--line);border-left:4px solid var(--glow)}
.wx-next h4{font-family:var(--serif);font-size:clamp(19px,2.6vw,23px);font-weight:700;
  color:var(--ink);line-height:1.25;margin-top:6px}
.wx-next p{font-size:16px;color:var(--ink-2);line-height:1.7;margin-top:9px}
.wx-next .cx-cta{margin-top:14px}
.wx-next-sub{display:block;margin-top:11px;font-size:14.5px;color:var(--ink-mute);line-height:1.55}
@media(max-width:560px){.wx-next{padding:16px 15px}}