/* ==========================================================================
   Palmistry tab — styles
   Extends the existing token set (--night / --brass / --paper …) defined in
   index.html. Nothing here overrides an existing selector; every class is
   namespaced so the kundali side of the site is untouched.
   ========================================================================== */

/* ---------- tab bar ---------- */
.tabbar{
  display:flex;gap:0;margin:22px 0 0;border:1px solid var(--line-2);border-radius:var(--r);
  overflow:hidden;width:fit-content;max-width:100%
}
.tabbtn{
  background:transparent;border:0;color:var(--muted);font-family:var(--body);font-size:13px;
  font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:11px 22px;cursor:pointer;
  line-height:1.5;transition:.15s;white-space:nowrap;display:flex;align-items:center;gap:8px
}
.tabbtn+.tabbtn{border-left:1px solid var(--line-2)}
.tabbtn:hover{color:var(--chalk)}
.tabbtn.on{background:linear-gradient(180deg,#D8A03E,#A9761F);color:#1A1206;font-weight:600}
.tabbtn:focus-visible{outline:2px solid var(--brass-lt);outline-offset:-2px}
.tabbtn svg{flex:none;opacity:.85}
html[lang="hi"] .tabbtn{letter-spacing:0;text-transform:none;font-size:14px}
@media(max-width:420px){.tabbtn{padding:11px 14px;font-size:12px}}

#tab-kundali[hidden],#tab-palm[hidden]{display:none}

/* ---------- upload ---------- */
.pgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:start}
@media(max-width:760px){.pgrid{grid-template-columns:1fr}}

.drop{
  position:relative;border:1px dashed var(--line-2);border-radius:var(--r);background:#0A101E;
  min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:26px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s
}
.drop:hover,.drop.hot{border-color:var(--brass);background:#0C1526}
.drop:focus-visible{outline:2px solid var(--brass-lt);outline-offset:2px}
.drop .glyph{color:var(--brass);opacity:.8}
.drop .big{font-family:var(--disp);font-size:19px;color:var(--chalk);line-height:1.3}
.drop .small{font-size:12.5px;color:var(--dim);max-width:34ch;line-height:1.55}
.drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop.has{padding:0;border-style:solid;border-color:var(--line-2);min-height:0;overflow:hidden;cursor:default}
.drop.has input[type=file]{display:none}
.drop .prev{width:100%;height:auto;display:block;max-height:340px;object-fit:contain;background:#06090F}

.tips{border:1px solid var(--line);border-left:2px solid var(--brass);border-radius:var(--r);
  background:var(--slab);padding:18px 20px}
.tips h3{margin:0 0 10px;font-family:var(--disp);font-weight:400;font-size:17px;color:var(--brass-lt)}
.tips ol{margin:0;padding-left:20px;color:#C3CADB;font-size:13.5px;line-height:1.65}
.tips li{margin:0 0 7px}
.tips li:last-child{margin-bottom:0}
.tips li b{color:var(--chalk);font-weight:500}

.pfields{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:20px}
.pfields .f{display:flex;flex-direction:column;gap:7px}
.pfields .c6{grid-column:span 6}
@media(max-width:760px){.pfields .c6{grid-column:span 12}}

/* ---------- privacy strip ---------- */
.privstrip{display:flex;align-items:flex-start;gap:11px;margin:20px 0 0;padding:13px 16px;
  border:1px solid var(--line);border-left:2px solid var(--ok);border-radius:var(--r);
  background:rgba(63,154,110,.06);font-size:13px;color:#C3CADB;line-height:1.6}
.privstrip svg{flex:none;color:var(--ok);margin-top:2px}
.privstrip b{color:var(--chalk);font-weight:500}

/* ---------- results ---------- */
#p-out{display:none;padding-bottom:80px}
#p-out.on{display:block}

.readplate{background:linear-gradient(158deg,#EFE9D8 0%,var(--paper) 38%,var(--paper-2) 100%);
  border-radius:var(--r);padding:16px;border:1px solid #B9AE8E;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 14px 34px rgba(0,0,0,.42)}
.readplate h3{margin:2px 4px 10px;font-family:var(--disp);font-weight:400;font-size:17px;
  color:var(--paper-ink);display:flex;align-items:baseline;gap:9px}
.readplate h3 small{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#7C7052;margin-left:auto}
.readplate canvas{width:100%;height:auto;display:block;border-radius:2px}
.platelegend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 4px 2px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#5F5540}
.platelegend span{display:inline-flex;align-items:center;gap:6px}
.platelegend i{width:16px;height:2px;border-radius:2px;display:inline-block}
.platelegend em{font-family:var(--disp);font-style:normal;font-size:13px;letter-spacing:0;
  text-transform:none;color:#7A6B4E;margin-left:1px}
html[lang="hi"] .platelegend{letter-spacing:0;text-transform:none;font-size:11.5px}

.readgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:820px){.readgrid{grid-template-columns:1fr}}

/* measured-features table */
.meas{width:100%;border-collapse:collapse;font-size:13px}
.meas th{font-family:var(--body);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);text-align:left;font-weight:500;padding:9px 12px;border-bottom:1px solid var(--line-2)}
.meas td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px;color:var(--chalk);
  vertical-align:top}
.meas td.k{font-family:var(--body);color:var(--muted);width:34%}
.meas td.v b{color:var(--brass-lt);font-weight:500}
.meas .conf{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:2px;vertical-align:middle}
.conf.hi{color:#6FD3A1;background:rgba(63,154,110,.14)}
.conf.md{color:var(--brass-lt);background:rgba(192,138,46,.14)}
.conf.lo{color:var(--sindoor-lt);background:rgba(220,58,32,.12)}
html[lang="hi"] .meas th,html[lang="hi"] .meas .conf{letter-spacing:0;text-transform:none}

/* reading cards */
.rcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.rcard{border:1px solid var(--line);border-left:2px solid var(--brass);border-radius:var(--r);
  padding:16px 18px;background:var(--slab)}
.rcard.quiet{border-left-color:var(--line-2)}
.rcard h4{margin:0 0 3px;font-family:var(--disp);font-weight:400;font-size:18px;color:var(--brass-lt)}
.rcard .cls{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin:0 0 9px}
.rcard p{margin:0 0 10px;font-size:13.5px;color:#C3CADB;line-height:1.62}
.rcard p:last-child{margin-bottom:0}
.rcard p b{color:var(--chalk);font-weight:500}
html[lang="hi"] .rcard .cls{letter-spacing:0;text-transform:none;font-size:11.5px}
html[lang="hi"] .rcard p{line-height:1.75}

/* the Milan tab is a real link, not a tab panel — match the tab styling */
.tabbar .tablink{text-decoration:none;display:inline-flex;align-items:center}

.palmxref{margin:30px 4px 0;font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.palmxref a{color:var(--brass);text-decoration:none;border-bottom:1px solid var(--line)}
.palmxref a:hover{color:var(--brass-lt)}
html[lang="hi"] /* the Milan tab is a real link, not a tab panel — match the tab styling */
.tabbar .tablink{text-decoration:none;display:inline-flex;align-items:center}

.palmxref{letter-spacing:0;font-size:13px}
#tab-kundali:not([hidden])~/* the Milan tab is a real link, not a tab panel — match the tab styling */
.tabbar .tablink{text-decoration:none;display:inline-flex;align-items:center}

.palmxref{display:none}

/* योग — combination readings */
.yintro{margin:0 0 16px;font-size:13.5px;color:var(--muted);line-height:1.66;max-width:64ch}
html[lang="hi"] .yintro{line-height:1.8}
.ycards .rcard{border-left-color:var(--brass-lt)}
.ytag{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin:0 0 9px!important}
html[lang="hi"] .ytag{letter-spacing:.12em}

/* भारतीय मत — the Indian reading, set apart from the Western one above it.
   Sindoor rather than brass on the rule, so the eye can tell at a glance
   which tradition it is reading. */
.indblock{margin-top:18px;padding:18px 20px;border:1px solid var(--line);
  border-left:2px solid var(--sindoor);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(193,58,42,.045),rgba(193,58,42,0) 60%),var(--slab)}
.indblock h4{margin:0 0 10px;font-family:var(--disp);font-weight:400;font-size:18px;
  color:var(--brass-lt);display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.indblock h4 .sname{font-size:19px;color:var(--sindoor-lt,#E8836F)}
.indblock h4 .slat{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--dim);text-transform:none}
.indblock>p{margin:0 0 10px;font-size:13.5px;color:#C3CADB;line-height:1.62}
.indblock>p:last-child{margin-bottom:0}
.indblock p b{color:var(--chalk);font-weight:500}
.indblock p i{color:var(--brass-lt);font-style:normal;font-family:var(--mono);font-size:12.5px}
html[lang="hi"] .indblock>p{line-height:1.78}

/* a classical verse, set as an epigraph */
.shloka{margin:14px 0 4px;padding:13px 0 11px 16px;border-left:1px solid var(--line-2)}
.shloka p{margin:0;font-family:var(--disp);font-size:16.5px;line-height:1.85;
  color:var(--paper);letter-spacing:.01em}
.shloka cite{display:block;margin-top:9px;font-family:var(--mono);font-style:normal;
  font-size:10.5px;letter-spacing:.08em;color:var(--dim)}
html[lang="hi"] .shloka cite{letter-spacing:0;font-size:11.5px}

/* the āyu caution and the karma close — quieter than the reading itself */
.indtail{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.indtail h4{font-size:15px;margin-bottom:6px;color:var(--brass)}
.indtail p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.66}
html[lang="hi"] .indtail p{line-height:1.8;font-size:13px}

/* adjust panel */
.adjust{border:1px solid var(--line);border-radius:var(--r);background:var(--slab);overflow:hidden}
.adjust>button{width:100%;text-align:left;background:none;border:0;padding:14px 18px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--chalk);
  font-family:var(--body);font-size:14px;font-weight:500}
.adjust>button:hover{color:var(--brass-lt)}
.adjust>button .car{font-family:var(--mono);font-size:11px;color:var(--dim);transition:transform .2s;flex:none}
.adjust.open>button .car{transform:rotate(90deg)}
.adjbody{display:none;padding:2px 18px 18px;border-top:1px solid var(--line)}
.adjust.open .adjbody{display:block}
.adjrow{margin:16px 0 0}
.adjrow:first-child{margin-top:14px}
.adjrow>span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin:0 0 8px}
html[lang="hi"] .adjrow>span{letter-spacing:.04em;text-transform:none;font-size:12.5px}
.adjrow .pickrow{margin:0}

/* wide note */
.pnote{font-size:12.5px;color:var(--dim);border-top:1px solid var(--line);padding-top:16px;
  margin-top:34px;line-height:1.65}
.pnote b{color:var(--muted)}
.pnote a{color:var(--brass-lt);text-decoration:underline;text-decoration-color:var(--brass-dk);
  text-underline-offset:2px}

.pbusy{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.pbusy i{width:11px;height:11px;border:2px solid var(--line-2);border-top-color:var(--brass);
  border-radius:50%;display:inline-block;animation:pspin .7s linear infinite}
@keyframes pspin{to{transform:rotate(360deg)}}

@media print{
  .tabbar,.drop,.tips,.privstrip,#p-form,.adjust,.pbusy{display:none!important}
  .readplate{box-shadow:none;border-color:#c9c4b3}
  .readgrid{grid-template-columns:1fr!important}
  .rcard,.readplate,.meas tr{break-inside:avoid}
  .rcard p{color:#1a1a1a!important}
  .rcard p b{color:#7a4f11!important}
}
@media(prefers-reduced-motion:reduce){.pbusy i{animation:none}}