/* ============================================================
   panchang.css — tool-specific layout for the Panchang pages.
   Inherits ALL colour / type / spacing tokens from assets/style.css
   (Nakshatra Color System, Light). No new palette, no web fonts,
   no dark-mode blocks — the site is light-only by design.
   ============================================================ */

.pg-wrap { max-width: 960px; margin: 0 auto; padding: 0 1.75rem; }

/* ── controls bar ── */
.pg-controls {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 10px; padding: 1rem 1.15rem; box-shadow: var(--shadow-1);
}
.pg-field { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 220px; }
.pg-field label {
  font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); font-weight: 700;
}
.pg-field input, .pg-field select {
  font-family: var(--ff-body); font-size: .95rem; padding: .55rem .7rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-raised); color: var(--text-1);
}
.pg-datenav { display: flex; gap: .4rem; align-items: center; }
.pg-datenav button {
  font-family: var(--ff-mono); font-size: .8rem; font-weight: 700;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-2); border-radius: 6px; padding: .5rem .7rem; cursor: pointer;
}
.pg-datenav button:hover { border-color: var(--purple); color: var(--purple); }

/* ── header line ── */
.pg-head { margin: 2rem 0 1rem; }
.pg-head h1 { font-family: var(--ff-disp); font-size: 1.9rem; margin: 0 0 .25rem; }
.pg-head .sub { font-family: var(--ff-mono); font-size: .78rem; color: var(--text-3); letter-spacing: .04em; }

/* ── card grid ── */
.pg-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 1rem; }
.pg-card {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 10px; padding: 1.1rem 1.2rem; box-shadow: var(--shadow-1);
}
.pg-card h2, .pg-card h3 {
  font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-2); font-weight: 700; margin: 0 0 .8rem;
}
.pg-row { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-top: 1px solid var(--bg-card); }
.pg-row:first-of-type { border-top: none; }
.pg-row .k { color: var(--text-3); font-size: .9rem; }
.pg-row .v { color: var(--text-1); font-weight: 600; text-align: right; }
.pg-row .v small { display: block; font-family: var(--ff-mono); font-size: .72rem; color: var(--text-3); font-weight: 400; }

.pg-limb { border-top: 1px solid var(--bg-card); }
.pg-limb summary {
  cursor: pointer; padding: .7rem 0; display: flex; justify-content: space-between;
  align-items: baseline; gap: 1rem; list-style: none;
}
.pg-limb summary::-webkit-details-marker { display: none; }
.pg-limb summary .name { font-family: var(--ff-disp); font-size: 1.15rem; color: var(--text-1); }
.pg-limb summary .until { font-family: var(--ff-mono); font-size: .74rem; color: var(--text-3); }
.pg-limb .body { padding: 0 0 .9rem; font-size: .9rem; color: var(--text-2); }
.pg-limb .body .meta { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin-top: .4rem; }
.pg-limb .body .meta dt { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pg-seq { font-family: var(--ff-mono); font-size: .8rem; color: var(--text-2); margin-top: .5rem; }

/* ── timing pills + day timeline ── */
.pg-timing { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; font-size: .9rem; }
.pg-timing .lab { color: var(--text-2); }
.pg-timing .rng { font-family: var(--ff-mono); font-size: .8rem; color: var(--text-1); }
.pg-timing.aus .lab::before, .pg-timing.ina .lab::before, .pg-timing.neu .lab::before {
  content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .5rem;
}
.pg-timing.aus .lab::before { background: var(--jade); }
.pg-timing.ina .lab::before { background: var(--rose); }
.pg-timing.neu .lab::before { background: var(--fog); }

.pg-tl { position: relative; height: 58px; margin: 1rem 0 .3rem; border-radius: 6px; background: var(--bg-card); overflow: hidden; }
.pg-tl .band { position: absolute; top: 0; bottom: 0; opacity: .55; }
.pg-tl .band.aus { background: var(--jade-400); }
.pg-tl .band.ina { background: var(--rose-400); }
.pg-tl .tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--dusk); }
.pg-tl .lbl { position: absolute; bottom: 2px; font-family: var(--ff-mono); font-size: .6rem; color: var(--text-3); transform: translateX(-50%); }
.pg-tl-legend { font-family: var(--ff-mono); font-size: .66rem; color: var(--text-3); display: flex; gap: 1rem; }

/* ── daylight arc ── */
.pg-arc { margin: .6rem 0; }
.pg-arc svg { width: 100%; height: 96px; display: block; }
.pg-arc .linetrack { stroke: var(--border); stroke-width: 2; fill: none; }
.pg-arc .sun { fill: var(--saffron); }
.pg-arc .moon { fill: var(--dusk); }
.pg-arc text { font-family: var(--ff-mono); font-size: 10px; fill: var(--text-3); }

/* ── choghadiya / hora grid ── */
.pg-tabs { display: flex; gap: .4rem; margin-bottom: .8rem; }
.pg-tabs button {
  font-family: var(--ff-mono); font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-3); border-radius: 6px; padding: .4rem .7rem; cursor: pointer;
}
.pg-tabs button[aria-selected="true"] { background: var(--purple); color: #fff; border-color: var(--purple); }
.pg-cho { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .4rem; }
.pg-cho .slot { border: 1px solid var(--border); border-radius: 6px; padding: .5rem .6rem; font-size: .8rem; }
.pg-cho .slot .nm { font-weight: 700; }
.pg-cho .slot .nm::before {
  content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
  margin-right: .45rem; vertical-align: middle; background: var(--fog);
}
.pg-cho .slot .tm { font-family: var(--ff-mono); font-size: .68rem; color: var(--text-3); }
.pg-cho .slot.auspicious .nm::before { background: var(--jade); }
.pg-cho .slot.inauspicious .nm::before { background: var(--rose); }

/* ── special yogas / festivals ── */
.pg-taglist { display: flex; flex-wrap: wrap; gap: .5rem; }
.pg-tag {
  font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .04em;
  border: 1px solid var(--border); border-radius: 100px; padding: .3rem .75rem; color: var(--text-2);
}
.pg-tag.pos { border-color: var(--jade); color: var(--jade); }
.pg-tag.cau { border-color: var(--rose); color: var(--rose); }

/* ── energy panel ── */
.pg-energy .lead { font-family: var(--ff-disp); font-size: 1.2rem; color: var(--text-1); margin: 0 0 .5rem; }
.pg-energy ul { margin: .3rem 0 .8rem 1.1rem; padding: 0; }
.pg-energy li { margin: .2rem 0; font-size: .9rem; }
.pg-energy .col-good h4, .pg-energy .col-warn h4 {
  font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; margin: 0;
}
.pg-energy .col-good h4 { color: var(--jade); }
.pg-energy .col-warn h4 { color: var(--rose); }

/* ── finder + calendar ── */
.pg-results { display: grid; gap: .8rem; margin-top: 1.2rem; }
.pg-result { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; padding: .9rem 1.1rem; }
.pg-result .d { font-family: var(--ff-disp); font-size: 1.15rem; }
.pg-result .t { font-family: var(--ff-mono); font-size: .76rem; color: var(--text-3); }

.pg-cal { width: 100%; border-collapse: collapse; margin-top: 1.2rem; }
.pg-cal th { font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding: .5rem; }
.pg-cal td { border: 1px solid var(--bg-card); vertical-align: top; height: 84px; width: 14.28%; padding: .35rem; }
.pg-cal td .dn { font-family: var(--ff-mono); font-size: .74rem; color: var(--text-3); }
.pg-cal td .ev { display: block; font-size: .68rem; margin-top: .2rem; color: var(--purple); }
.pg-cal td.today { background: var(--bg-card); }

.pg-note { font-family: var(--ff-mono); font-size: .72rem; color: var(--text-3); margin-top: 1rem; line-height: 1.6; }
.pg-err { color: var(--rose); font-size: .9rem; margin-top: 1rem; }

@media (max-width: 640px) {
  .pg-cal td { height: 62px; font-size: .6rem; }
  .pg-head h1 { font-size: 1.5rem; }
}