/* Shared styling for the five Jyotish tools (/kundli/, /panchangam/,
   /horoscope-matching/, /muhurtham/, /vasthu/). Same palette and component
   vocabulary as the rest of ManyHand — see any other tool page for the
   original inline version these were factored out of. */

:root{ --cream:#faf5ec; --paper:#fffdf8; --ink:#221a12; --inksoft:#6f6152; --maroon:#0e386d; --gold:#0b7d74; --golddeep:#0a5f57; --line:#e8ddc9; --radius:16px; --good:#1f6b45; --warn:#8a5a12; --bad:#8c2f2f; }
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{ font-family:"Hanken Grotesk",system-ui,sans-serif; background:var(--cream); color:var(--ink); line-height:1.5; display:flex; flex-direction:column; min-height:100%; }

header{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1.5px solid var(--line); background:var(--paper); }
header .brand{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:20px; letter-spacing:-.02em; color:var(--maroon); text-decoration:none; }
header .brand span{ color:var(--gold); }
header .back{ font-size:13px; font-weight:700; color:var(--maroon); text-decoration:none; }

main{ width:100%; max-width:760px; margin:0 auto; padding:26px 16px calc(40px + env(safe-area-inset-bottom)); }
h1.title{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:30px; text-align:center; margin:4px 0 2px; }
.sub{ text-align:center; color:var(--inksoft); font-size:15px; margin-bottom:18px; }

/* Language switch */
.langbar{ display:flex; justify-content:center; margin-bottom:18px; }
.langbar .seg{ display:inline-flex; flex-wrap:wrap; background:rgba(34,26,18,.05); border:1.5px solid var(--line); border-radius:10px; padding:3px; gap:3px; }
.langbar button{ border:none; background:transparent; cursor:pointer; font:inherit; font-weight:700; font-size:13.5px; color:var(--inksoft); padding:6px 14px; border-radius:7px; }
.langbar button.on{ background:var(--maroon); color:#fff; }

.panel{ background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:18px; box-shadow:0 8px 24px -18px rgba(34,26,18,.5); }
.step-label{ font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--golddeep); margin:0 0 12px; }

.field{ margin-bottom:14px; }
.field label{ display:block; font-size:13px; font-weight:700; margin-bottom:5px; }
.field input, .field select{ width:100%; font:inherit; font-size:15px; color:var(--ink); border:1.5px solid var(--line); border-radius:10px; padding:9px 11px; background:#fff; }
.field input:focus, .field select:focus{ outline:none; border-color:var(--gold); }
.field .hint, .hint{ font-size:12.5px; color:var(--inksoft); margin-top:5px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

details.adv{ border-top:1.5px solid var(--line); padding-top:12px; margin-top:4px; }
details.adv summary{ cursor:pointer; font-weight:800; font-size:13.5px; color:var(--maroon); }
details.adv .adv-body{ margin-top:12px; }

.btn{ width:100%; border:none; background:var(--maroon); color:#fff; font:inherit; font-weight:800; font-size:15.5px; padding:12px 16px; border-radius:11px; cursor:pointer; }
.btn:hover{ background:#0b2d58; }
.btn.secondary{ background:transparent; color:var(--maroon); border:1.5px solid var(--line); }

.err{ display:none; background:#fdf0ee; border:1.5px solid #f0c9c2; color:var(--bad); border-radius:11px; padding:11px 13px; font-size:14px; margin-bottom:16px; }
.err.on{ display:block; }
.note{ background:rgba(11,125,116,.07); border:1.5px solid rgba(11,125,116,.25); border-radius:11px; padding:11px 13px; font-size:13.5px; margin-bottom:14px; }

/* Result summary line */
.headline{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:6px; }
.pill{ background:rgba(14,56,109,.07); border:1.5px solid var(--line); border-radius:999px; padding:6px 13px; font-size:13.5px; font-weight:700; }
.pill b{ color:var(--maroon); }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.stat{ border:1.5px solid var(--line); border-radius:11px; padding:11px 13px; background:#fff; }
.stat .k{ font-size:12px; color:var(--inksoft); font-weight:700; }
.stat .v{ font-weight:800; font-size:16px; }

table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th,td{ padding:8px; border-bottom:1px solid var(--line); text-align:right; }
th:first-child,td:first-child{ text-align:left; }
th{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--golddeep); }
.scroll{ overflow-x:auto; }

.writeup{ background:rgba(11,125,116,.06); border:1.5px solid rgba(11,125,116,.22); border-radius:12px; padding:13px 15px; margin-top:4px; }
.writeup .step-label{ margin-bottom:6px; }
.writeup p{ font-size:14.5px; }

/* Charts */
.charts{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.chartbox h3{ font-size:13px; font-weight:800; text-align:center; margin-bottom:6px; color:var(--golddeep); text-transform:uppercase; letter-spacing:.08em; }
.kundli{ width:100%; height:auto; display:block; }
.k-cell{ fill:#fff; stroke:none; }
.k-line{ stroke:var(--line); stroke-width:1.5; }
.k-centre{ fill:var(--paper); stroke:none; }
.k-centre-big{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:22px; fill:var(--maroon); }
.k-centre-sub{ font-size:13px; fill:var(--inksoft); font-weight:700; }
.k-sign{ font-size:12px; fill:var(--inksoft); font-weight:700; }
.k-planet{ font-size:14px; fill:var(--ink); font-weight:700; }
.k-retro{ fill:var(--bad); }
.k-lagna{ fill:rgba(14,56,109,.08); stroke:var(--maroon); stroke-width:1.5; }
.k-lagna-tag{ font-size:11px; fill:var(--maroon); font-weight:800; }

/* Status colouring, shared by matching and vasthu */
.s-ideal,.s-good{ color:var(--good); font-weight:700; }
.s-neutral{ color:var(--inksoft); }
.s-avoid,.s-caution{ color:var(--bad); font-weight:700; }
.bar{ height:9px; border-radius:99px; background:rgba(34,26,18,.08); overflow:hidden; margin-top:7px; }
.bar i{ display:block; height:100%; background:var(--gold); }

/* Vasthu direction grid */
.dirgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; max-width:330px; margin:0 auto; }
.dirgrid .cellbox{ border:1.5px solid var(--line); border-radius:10px; background:#fff; padding:9px 6px; text-align:center; min-height:66px; }
.dirgrid .cellbox .d{ font-size:11px; font-weight:800; color:var(--golddeep); text-transform:uppercase; letter-spacing:.05em; }
.dirgrid .cellbox .items{ font-size:11.5px; color:var(--inksoft); margin-top:3px; line-height:1.35; }
.dirgrid .cellbox.centre{ background:var(--cream); }

details.faq{ border-top:1.5px solid var(--line); padding:11px 0; }
details.faq summary{ cursor:pointer; font-weight:700; font-size:14.5px; }
details.faq p{ color:var(--inksoft); font-size:14px; margin-top:6px; }

.related{ font-size:13.5px; margin-top:14px; }
.related a{ color:var(--maroon); font-weight:700; }

footer{ text-align:center; color:var(--inksoft); font-size:13px; padding:24px 16px 30px; margin-top:auto; }
footer a{ color:var(--maroon); }

.loading{ text-align:center; color:var(--inksoft); font-size:14px; padding:10px; }

@media(max-width:600px){
  h1.title{ font-size:25px; }
  .charts{ grid-template-columns:1fr; }
  .row2{ grid-template-columns:1fr; }
}