/* Akashalipi — kundali tool. Layout only. All colour and size from tokens.css */

body{overflow:hidden}
body.work{overflow:auto}
[hidden]{display:none!important}

/* ══ GATE ══ */
#gate{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  align-items:center;padding:var(--s-8) var(--s-4);position:relative;overflow:hidden}
.mark{position:absolute;width:min(78vmin,600px);opacity:.07;pointer-events:none;z-index:0}
.mark path,.mark rect{fill:none;stroke:var(--star);stroke-width:1.2}
.gate-in{position:relative;z-index:2;width:100%;max-width:600px;text-align:center}
.wordmark{font-family:var(--font-display);font-size:var(--t-display);font-weight:600;line-height:1}
.wordmark i{font-style:normal;color:var(--brass)}
.rom{font-size:var(--t-micro);letter-spacing:.44em;text-transform:uppercase;
  color:var(--star-mute);font-weight:600;margin-top:var(--s-3)}
.gline{width:44px;height:1px;background:var(--line-strong);margin:var(--s-6) auto}
.ask{font-family:var(--font-display);font-size:clamp(1.05rem,2.6vw,1.3rem);
  color:var(--star-dim);margin-bottom:var(--s-8)}

.gfields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);text-align:left}
.gfields .full{grid-column:1/-1}
@media(max-width:520px){.gfields{grid-template-columns:1fr}}
.gbtn{width:100%;margin-top:var(--s-6);border:1px solid var(--brass);background:var(--brass);
  color:var(--sky-0);font-family:var(--font-ui);font-size:var(--t-small);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;padding:.95rem 1rem;cursor:pointer;
  border-radius:var(--radius);transition:var(--dur) var(--ease)}
.gbtn:hover{background:var(--brass-deep);border-color:var(--brass-deep);color:var(--star)}
.gfoot{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);
  margin-top:var(--s-4);flex-wrap:wrap}
.chk{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-small);color:var(--star-dim)}
.chk input{width:auto;padding:0}
.mini{background:none;border:none;font-family:var(--font-ui);font-size:var(--t-small);
  color:var(--star-dim);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.mini:hover{color:var(--brass)}
.glang{position:absolute;top:var(--s-4);right:var(--s-4);z-index:3;display:flex;
  border:1px solid var(--line-strong)}
.glang button{background:none;border:none;font-family:var(--font-ui);font-size:var(--t-micro);
  font-weight:600;letter-spacing:.1em;padding:.4rem .8rem;cursor:pointer;color:var(--star-dim)}
.glang button[aria-pressed="true"]{background:var(--brass);color:var(--sky-0)}
.err{color:var(--debil);font-size:var(--t-small);margin-top:var(--s-3);font-weight:500;text-align:left}
.saved{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line);text-align:left}
.saved h4{font-size:var(--t-micro);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--star-mute);margin-bottom:var(--s-2);font-family:var(--font-ui)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{display:inline-flex;align-items:center;gap:var(--s-2);border:1px solid var(--line-strong);
  background:var(--sky-2);padding:.34rem .6rem;font-size:var(--t-small);cursor:pointer;color:var(--star)}
.chip:hover{border-color:var(--brass)}
.chip .del{color:var(--star-mute);font-size:1rem;line-height:1;padding:0 .1rem}
.chip .del:hover{color:var(--debil)}
.authrow,.libline{margin-top:var(--s-4);font-size:var(--t-small);color:var(--star-dim);text-align:left}
.authrow button{background:none;border:none;font-family:var(--font-ui);font-size:var(--t-small);
  color:var(--brass);text-decoration:underline;text-underline-offset:3px;cursor:pointer;
  padding:0;font-weight:500}
.libline a{color:var(--star-dim);text-decoration:underline;text-underline-offset:3px}
.libline a:hover{color:var(--brass)}

/* ══ WORKSPACE ══ */
#work{min-height:100dvh;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:40;background:rgba(8,12,24,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-strong);display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-3) var(--gutter)}
.tbrand{font-family:var(--font-display);font-size:1.25rem;font-weight:600;white-space:nowrap;
  text-decoration:none}
.tbrand i{font-style:normal;color:var(--brass)}
.who{flex:1;min-width:0;font-size:var(--t-small);color:var(--star-dim);
  border-left:1px solid var(--line-strong);padding-left:var(--s-4);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.who b{font-weight:500;color:var(--star)}
@media(max-width:700px){.who{display:none}}
.tools{display:flex;gap:var(--s-2);align-items:center}
.tools button,.toplink{background:none;border:1px solid var(--line-strong);font-family:var(--font-ui);
  font-size:var(--t-micro);font-weight:600;letter-spacing:.08em;padding:.4rem .7rem;cursor:pointer;
  color:var(--star-dim);text-decoration:none;white-space:nowrap;transition:var(--dur) var(--ease)}
.tools button:hover,.toplink:hover{border-color:var(--brass);color:var(--brass)}

.stage{flex:1;display:grid;grid-template-columns:minmax(300px,38%) 1fr;min-height:0}
@media(max-width:900px){.stage{grid-template-columns:1fr}}
.left{border-right:1px solid var(--line-strong);padding:var(--s-6) var(--gutter);
  background:var(--sky-1);display:flex;flex-direction:column;gap:var(--s-4)}
@media(max-width:900px){.left{border-right:none;border-bottom:1px solid var(--line-strong)}}
.right{display:flex;flex-direction:column;min-width:0}

.cbox{max-width:430px;width:100%;margin:0 auto}
.clab{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-2);
  font-size:var(--t-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--star-mute);font-family:var(--font-ui)}
.clab b{font-family:var(--font-display);font-size:1rem;letter-spacing:.02em;color:var(--brass);
  text-transform:none;font-weight:600}
.clab select{width:auto;flex:1;font-size:var(--t-small);padding:.24rem .4rem;
  letter-spacing:0;text-transform:none;font-weight:500}

/* chart */
.kundali{width:100%;height:auto;display:block}
.kundali .fr{fill:none;stroke:var(--star);stroke-width:1.4;opacity:.85}
.kundali .dg{fill:none;stroke:var(--star);stroke-width:.8;opacity:.32}
.kundali .in{fill:none;stroke:var(--brass);stroke-width:1.1;opacity:.9}
.kundali .sn{font-family:var(--font-ui);font-size:10.5px;font-weight:600;
  fill:var(--star-mute);text-anchor:middle}
.kundali .pl{font-family:var(--font-display);font-size:14px;font-weight:500;
  fill:var(--brass);text-anchor:middle}
.scribe{stroke-dasharray:1600;stroke-dashoffset:1600;
  animation:scribe var(--dur-slow) var(--ease-draw) forwards}
.scribe-2{animation-delay:.45s}
.scribe-3{animation-delay:.85s}
.settle{opacity:0;animation:settle .8s var(--ease) forwards;animation-delay:1.9s}
@keyframes scribe{to{stroke-dashoffset:0}}
@keyframes settle{to{opacity:1}}

.warn{font-size:var(--t-small);color:var(--debil);line-height:1.55;
  border-left:2px solid var(--debil);padding-left:var(--s-3)}

/* panes */
.pane{padding:var(--s-6) var(--gutter);display:none}
.pane.on{display:block;animation:fade .35s var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.tblnote{margin-top:var(--s-4);font-size:var(--t-small);color:var(--star-mute);
  max-width:var(--measure);line-height:1.6}
.vtbl{overflow-x:auto}
.vtbl table{min-width:760px;font-size:var(--t-small)}
.vtbl td,.vtbl th{padding-right:var(--s-2);white-space:nowrap}
.pan .fact dd{font-size:1.12rem}
td.p{font-family:var(--font-display);font-size:1.02rem;color:var(--star);white-space:nowrap}
tr.now td{background:var(--brass-wash);color:var(--star);font-weight:500}
.t-ex{color:var(--exalt)}.t-db{color:var(--debil)}.t-ow{color:var(--own)}.t-r{color:var(--debil)}

/* consultation pane */
.gate2{border:1px solid var(--line-strong);border-left:2px solid var(--brass);
  background:var(--sky-2);padding:var(--s-4) var(--s-6);margin-bottom:var(--s-6)}
.gate2 h3{font-size:1.2rem;margin-bottom:var(--s-2)}
.gate2 p{font-size:var(--t-small);color:var(--star-dim);max-width:var(--measure)}
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border-top:1px solid var(--line-strong)}
.sv{padding:var(--s-4) var(--s-4) var(--s-4) 0;border-bottom:1px solid var(--line);
  border-right:1px solid var(--line)}
.sv:last-child{border-right:none}
@media(max-width:760px){.sv{border-right:none;padding-right:0}}
.sv h3{font-size:1.08rem}
.sv .pr{font-family:var(--font-display);font-size:1.55rem;color:var(--brass);
  display:block;margin:var(--s-1) 0 var(--s-2)}
.sv .pr span{font-family:var(--font-ui);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--star-mute);display:block;font-weight:600}
.sv p{font-size:var(--t-small);color:var(--star-dim);line-height:1.6}
.rub{font-family:var(--font-display);font-size:1.22rem;color:var(--brass);
  border-left:2px solid var(--brass);padding-left:var(--s-4);margin:var(--s-6) 0;
  line-height:1.5;max-width:32rem}
.legal{font-size:var(--t-micro);color:var(--star-mute);line-height:1.7;
  border-top:1px solid var(--line);padding-top:var(--s-4);margin-top:var(--s-6);
  letter-spacing:0;text-transform:none}

/* ══ MODALS ══ */
.ovl{position:fixed;inset:0;z-index:100;background:rgba(8,12,24,.78);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:var(--s-4)}
.modal{background:var(--sky-1);border:1px solid var(--line-strong);max-width:400px;width:100%;
  padding:var(--s-8);position:relative}
.modal h3{font-size:1.4rem;margin-bottom:var(--s-1)}
.modal .msub{font-size:var(--t-small);color:var(--star-dim);margin-bottom:var(--s-6)}
.modal .x{position:absolute;top:var(--s-2);right:var(--s-3);background:none;border:none;
  font-size:1.4rem;cursor:pointer;color:var(--star-mute);line-height:1}
.modal .x:hover{color:var(--star)}
.gbtn2{width:100%;display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  border:1px solid var(--line-strong);background:var(--sky-2);color:var(--star);
  font-family:var(--font-ui);font-size:var(--t-small);font-weight:500;padding:.72rem 1rem;
  cursor:pointer;transition:var(--dur) var(--ease)}
.gbtn2:hover{border-color:var(--star-mute)}
.orline{display:flex;align-items:center;gap:var(--s-3);margin:var(--s-4) 0;
  font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;
  color:var(--star-mute);font-weight:600}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--line)}
.mfield{margin-bottom:var(--s-3)}
.mswap{background:none;border:none;font-size:var(--t-small);color:var(--star-dim);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-top:var(--s-3);
  padding:0;font-family:var(--font-ui)}
.mswap:hover{color:var(--brass)}
.mmsg{font-size:var(--t-small);margin-top:var(--s-3);font-weight:500;line-height:1.5}
.mmsg.ok{color:var(--exalt)}
.mmsg.no{color:var(--debil)}

@media(prefers-reduced-motion:reduce){
  .scribe,.settle,.pane.on{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}
  *{transition-duration:1ms!important}
}
