/* ══ SENRA · Jyotira ═══════════════════════════════════════════════
   The same noir ground as the rest of the house, warmed by one degree:
   the lamp of jyotiṣa is a lamp, so a thin brass runs through the
   yantra, the lagna mark and the running daśā. Everything else stays
   silver-violet.
   ───────────────────────────────────────────────────────────────── */

.view-jyo{ --brass:#c9a86a; --brass-soft:rgba(201,168,106,.34); }

.jyo-shell{ max-width:1240px; margin:0 auto; }
.jyo-head{ margin-bottom:42px; }

.jyo-grid{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(26px,4vw,58px); align-items:start;
}

/* ── varga chips ───────────────────────────────────────────────── */
.varga-chips{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px; margin-bottom:18px;
}
.chip-sm{
  padding:7px 4px; text-align:center; line-height:1.25;
  display:flex; flex-direction:column; gap:1px;
}
.chip-sm em{
  font-style:normal; font-size:7.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--silver-4);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chip-sm.is-on em{ color:var(--brass); }

/* ── the kuṇḍalī ───────────────────────────────────────────────── */
.jyo-chart-holder{
  position:relative; width:100%; max-width:520px; margin:0 auto; aspect-ratio:1;
}
.jyo-chart-holder::before{
  content:''; position:absolute; inset:12%;
  background:radial-gradient(circle, rgba(142,125,208,.14), transparent 68%);
  filter:blur(24px);
}
#jChart{ position:relative; width:100%; height:100%; overflow:visible; }

.jc-line{
  fill:none; stroke:var(--hair-2); stroke-width:1; vector-effect:non-scaling-stroke;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:jcDraw 1.5s var(--ease-out) forwards;
}
@keyframes jcDraw{ to{ stroke-dashoffset:0; } }
.jc-court{ fill:rgba(142,125,208,.05); stroke:none; }

.jc-sign{
  fill:var(--silver-4); font-family:var(--sans); font-size:10px; letter-spacing:.14em;
  text-anchor:middle; dominant-baseline:central;
  opacity:0; animation:jcIn .8s var(--ease-out) forwards;
}
.jc-graha{
  font-family:var(--serif); font-size:17px; text-anchor:middle; dominant-baseline:central;
  fill:var(--silver); letter-spacing:.02em;
  opacity:0; animation:jcIn .9s var(--ease-out) forwards;
}
.jc-graha .jc-g{ fill:var(--silver); }
.jc-graha .jc-g.is-ex{ fill:var(--brass); }
.jc-graha .jc-g.is-deb{ fill:var(--silver-4); }
.jc-graha .jc-r{ fill:var(--violet); font-size:10px; }
.jc-graha .jc-sp{ fill:var(--silver-4); }
@keyframes jcIn{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }
body[data-motion="calm"] .jc-sign,
body[data-motion="calm"] .jc-graha{ animation-duration:.01s; }
body[data-motion="calm"] .jc-line{ animation-duration:.01s; }

.jc-lagna{
  fill:none; stroke:var(--brass); stroke-width:1.2; vector-effect:non-scaling-stroke;
  opacity:.9;
}
.jc-court-a{
  fill:var(--silver-3); font-family:var(--sans); font-size:13px; letter-spacing:.3em;
  text-anchor:middle;
}
.jc-court-b{
  fill:var(--silver-4); font-family:var(--serif); font-style:italic; font-size:15px;
  text-anchor:middle;
}

.jyo-chart-caption{
  text-align:center; margin-top:16px;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--silver-3);
}
.jyo-chart-caption em{ font-style:normal; color:var(--silver-4); }

/* ── pañcāṅga strip ────────────────────────────────────────────── */
.jyo-panch{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--hair); border:1px solid var(--hair);
  margin-top:30px;
}
.jp-cell{
  background:rgba(10,10,18,.5); padding:11px 13px;
  display:flex; flex-direction:column; gap:3px; min-width:0;
}
.jp-k{ font-size:8px; letter-spacing:.24em; text-transform:uppercase; color:var(--silver-4); }
.jp-v{
  font-family:var(--serif); font-size:15px; color:var(--silver);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── the graha table ───────────────────────────────────────────── */
.jyo-table-wrap{ margin-top:26px; overflow-x:auto; }
.jyo-table{
  width:100%; border-collapse:collapse; font-size:12px; min-width:560px;
}
.jyo-table th{
  text-align:left; font-weight:400; font-size:8px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--silver-4);
  padding:0 10px 9px; border-bottom:1px solid var(--hair-2); white-space:nowrap;
}
.jyo-table th.num,.jyo-table td.num{ text-align:right; }
.jyo-table td{
  padding:9px 10px; border-bottom:1px solid var(--hair);
  color:var(--silver-2); white-space:nowrap;
  font-family:var(--serif); font-size:14px;
}
.jyo-table tbody tr{ opacity:0; animation:jcIn .7s var(--ease-out) forwards; }
.jyo-table tbody tr:hover td{ background:rgba(142,125,208,.06); }
.jt-g{ color:var(--silver); }
.jt-gl{ color:var(--violet); margin-right:5px; }
.jt-st{ white-space:normal; }
/* a graha can be svakṣetra and mūlatrikoṇa at once — let the badges fall
   onto a second line rather than push the table off its own edge */
.jt-sts{ display:flex; flex-wrap:wrap; gap:3px 0; max-width:138px; }
.jst{
  display:inline-block; margin:0 4px 0 0; padding:1px 6px;
  font-family:var(--sans); font-size:8.5px; letter-spacing:.12em;
  border:1px solid var(--hair-2); color:var(--silver-3); border-radius:1px;
  cursor:help;
}
.jst.is-ex{ color:var(--brass); border-color:var(--brass-soft); }
.jst.is-deb{ color:var(--silver-4); }
.jst.is-own,.jst.is-mt{ color:var(--glow); border-color:var(--hair-v); }
.jst.is-vk{ color:var(--violet); border-color:var(--hair-v); }
.jst.is-vgt{ color:var(--blue); border-color:rgba(127,149,200,.3); }

/* ── Viṁśottarī ────────────────────────────────────────────────── */
.jyo-dasha{ margin-top:32px; border-top:1px solid var(--hair); padding-top:20px; }
.jd-head{
  margin:0 0 12px; display:flex; justify-content:space-between; align-items:baseline;
  gap:14px; flex-wrap:wrap;
}
.jd-head span{
  font-family:var(--serif); font-size:15px; color:var(--silver);
  letter-spacing:.06em;
}
.jd-head em{ font-style:normal; font-size:9px; letter-spacing:.16em; color:var(--silver-4); }

.jd-track{ display:flex; gap:2px; height:26px; }
.jd-bar{
  position:relative; background:rgba(142,125,208,.10); min-width:0;
  border-bottom:1px solid var(--hair-2);
  transition:background .5s var(--ease);
}
.jd-bar i{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-style:normal; font-family:var(--serif); font-size:11px; color:var(--silver-4);
  overflow:hidden;
}
.jd-bar:hover{ background:rgba(142,125,208,.2); }
.jd-bar.is-on{
  background:linear-gradient(180deg, rgba(201,168,106,.26), rgba(201,168,106,.10));
  border-bottom-color:var(--brass);
}
.jd-bar.is-on i{ color:var(--brass); }

.jd-now{
  margin-top:14px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  font-size:11px;
}
.jd-lord{ font-family:var(--serif); font-size:15px; color:var(--silver); }
.jd-span{ color:var(--silver-4); letter-spacing:.08em; margin-left:2px; }
.jd-arrow{ color:var(--violet); margin:0 4px; }

/* ── responsive ────────────────────────────────────────────────── */
@media (max-width:1020px){
  /* minmax(0,…), not 1fr: the varga chips carry long nowrap words like
     DVĀDAŚĀMŚA, and an auto floor would let them push the column — and the
     whole page — wider than the phone */
  .jyo-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:620px){
  .varga-chips{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .chip-sm{ min-width:0; }
  .chip-sm em{ font-size:7px; letter-spacing:.1em; }
  .jyo-panch{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .jc-graha{ font-size:19px; }
  .jc-sign{ font-size:11px; }
}