/* ==========================================================================
   Jyoti: "Generate your kundli" funnel
   Plain CSS, no framework, no build step.

   Two visual languages on purpose:
   1. Page chrome (--pc-* tokens): the same night-sky / gold-CTA brand used
      by landing/index.html and static/login.html. Wraps everything.
   2. Sheet skin (--sh-* tokens): a single-theme, print-like "luxury paper"
      look for the kundli artifact itself (header, charts, planet table,
      footer). Deliberately does NOT follow the page's dark theme: a kundli
      is meant to look like something you would print and keep.
   ========================================================================== */

:root {
  /* -- Page chrome (night sky + gold) -- */
  --pc-navy-deep: #0E1329;
  --pc-navy-mid: #141B3D;
  --pc-navy-late: #1A2149;
  --pc-cream: #EFEAE0;
  --pc-text-muted: #C6C4D6;
  --pc-gold: #E0A63E;
  --pc-gold-light: #F0C878;
  --pc-cta-a: #EBB554;
  --pc-cta-b: #D99C33;
  --pc-cta-hover-a: #F2C267;
  --pc-cta-hover-b: #E0A63E;
  --pc-cta-text: #241A05;
  --pc-card-bg: #FFFDF8;
  --pc-card-text: #2A2620;
  --pc-card-muted: #6E6857;
  --pc-input-border: #D9CFBB;
  --pc-error: #B23A3A;

  /* -- Sheet skin (print artifact) -- */
  --sh-paper: #FFFDF8;
  --sh-ink: #1D2242;
  --sh-gold: #B8791F;
  --sh-gold-light: #D9AB4C;
  --sh-muted: #6F6B5E;
  --sh-terracotta: #A94E3D;
  --sh-band: #F4EBD7;
  --sh-width: 794px;

  /* -- Fonts -- */
  --font-heading: 'Martel', serif;
  --font-body: 'Mukta', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-deva: 'Noto Serif Devanagari', serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: linear-gradient(178deg, var(--pc-navy-deep) 0%, var(--pc-navy-mid) 55%, var(--pc-navy-late) 100%);
  color: var(--pc-cream);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  position: relative;
}

a { color: var(--pc-gold-light); text-decoration: none; }
a:hover { text-decoration: underline; color: #F6D89A; }

.hidden { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Keyboard focus must stay visible everywhere (quality bar requirement).
   :focus-visible so a mouse click does not draw a ring, only keyboard nav. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--pc-gold);
  outline-offset: 2px;
}

/* ============ Static backdrop ============
   Spec calls for "a static radial-dot backdrop", not the landing page's
   animated SVG starfield/constellation generator, so this is plain CSS,
   no JS, no animation to gate behind prefers-reduced-motion. */
#sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(240, 200, 120, .55) 1px, transparent 1.6px),
    radial-gradient(rgba(240, 200, 120, .32) 1px, transparent 1.6px);
  background-size: 140px 140px, 90px 90px;
  background-position: 0 0, 45px 60px;
  opacity: .55;
}

/* ============ Top bar ============ */

.topbar {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 24px 0;
}

.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--pc-cream);
}
.topbar-brand:hover { text-decoration: none; }
.topbar-mark { width: 32px; height: 32px; flex: none; }
.topbar-word {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: .01em;
  color: var(--pc-cream);
}
.topbar-word-io { color: var(--pc-gold); }

/* ============ Generic buttons (page chrome) ============ */

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15.5px;
  border-radius: 12px;
  padding: 13px 26px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
}
.btn-primary:hover { text-decoration: none; }
.btn-secondary:hover { text-decoration: none; }

.btn-primary {
  background: linear-gradient(180deg, var(--pc-cta-a), var(--pc-cta-b));
  color: var(--pc-cta-text);
  box-shadow: 0 8px 22px rgba(217, 156, 51, .3);
  transition: background .15s ease, transform .12s ease;
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--pc-cta-hover-a), var(--pc-cta-hover-b));
}
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  background: transparent;
  color: var(--pc-gold-light);
  border: 1px solid var(--pc-gold);
  transition: background .15s ease;
}
.btn-secondary:hover { background: rgba(240, 200, 120, .1); }

.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(36, 26, 5, .3);
  border-top-color: var(--pc-cta-text);
  border-radius: 50%;
  display: inline-block;
  animation: pcSpin .7s linear infinite;
  flex: none;
}
@keyframes pcSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

.page-disclaimer {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 30px auto 0;
  padding: 0 24px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #8E8CA6;
  text-align: center;
}

.page-footer-space { height: 46px; }

/* ==========================================================================
   Generate page (static/kundli.html)
   ========================================================================== */

.introWrap {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: 36px 24px 8px;
  text-align: center;
}
.introEyebrow {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pc-gold);
}
.introTitle {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.25;
  color: #F6F1E4;
}
.introSub {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--pc-text-muted);
}

.formWrap {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 28px auto 0;
  padding: 0 24px;
}

.formCard {
  background: var(--pc-card-bg);
  border-radius: 16px;
  padding: 28px 26px 26px;
  box-shadow: 0 12px 34px rgba(6, 9, 26, .4);
  color: var(--pc-card-text);
}

.field { margin: 0 0 18px; }
.field:last-of-type { margin-bottom: 0; }

.field label,
.fieldLabel {
  display: block;
  margin: 0 0 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pc-card-text);
}

.field input[type="text"],
.field input[type="date"],
.field input[type="time"],
.field input[type="tel"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--pc-input-border);
  background: #FFFFFF;
  color: var(--pc-card-text);
  font-family: var(--font-body);
  font-size: 16px; /* keeps iOS Safari from auto-zooming on focus */
  outline: none;
}
.field input:focus {
  border-color: var(--pc-gold);
}
.field .help {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pc-card-muted);
}

.phoneRow {
  display: flex;
  gap: 8px;
}
.phoneChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0 14px;
  border-radius: 12px;
  border: 1.5px solid var(--pc-input-border);
  background: #FFFFFF;
  color: var(--pc-card-text);
  font-weight: 700;
  font-size: 15px;
}
.phoneRow input[type="tel"] { flex: 1 1 auto; min-width: 0; }

/* Pill groups: chart-style choice and "did you mean" city candidates share
   this base look, distinguished by whether a pill can be "active". */
.pillGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pill {
  border: 1.5px solid var(--pc-input-border);
  background: #FFFFFF;
  color: var(--pc-card-text);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.pill:hover { border-color: var(--pc-gold); }
.pill.active {
  background: linear-gradient(180deg, var(--pc-cta-a), var(--pc-cta-b));
  border-color: transparent;
  color: var(--pc-cta-text);
}

.tosRow {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 20px 0 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #5B5647;
  cursor: pointer;
}
.tosCheckbox {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  accent-color: var(--pc-cta-b);
  cursor: pointer;
}
.tosRow a { color: var(--sh-gold); font-weight: 600; }
.tosRow a:hover { color: #8F5D14; }

.submitBtn {
  width: 100%;
  margin-top: 20px;
  padding: 14px 20px;
  font-size: 16px;
}

.formStatus {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #8F5D14;
  min-height: 1.2em;
}
.formStatus.error { color: var(--pc-error); font-weight: 600; }

.candidateBlock { margin-top: 12px; }
.candidateLabel {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pc-card-text);
}

.exampleSection {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 56px auto 0;
  padding: 0 24px;
  text-align: center;
}
.exampleHeading {
  margin: 0 0 22px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: #F6F1E4;
}

.ribbon {
  position: absolute;
  top: 16px;
  right: -34px;
  width: 150px;
  padding: 5px 0;
  transform: rotate(40deg);
  background: linear-gradient(180deg, var(--pc-cta-a), var(--pc-cta-b));
  color: var(--pc-cta-text);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 3px 10px rgba(6, 9, 26, .3);
  pointer-events: none;
}

@media (max-width: 600px) {
  .formCard { padding: 24px 18px 22px; }
  .phoneRow { flex-wrap: nowrap; }
}

/* ==========================================================================
   View page (static/kundli_view.html)
   ========================================================================== */

.viewWrap {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* -- Loading state -- */
.loadingPlaceholder {
  width: 100%;
  max-width: var(--sh-width);
  margin: 32px auto 0;
  aspect-ratio: 794 / 1020;
  border-radius: 10px;
  border: 1px solid rgba(184, 134, 11, .35);
  background: linear-gradient(180deg, #FFFDF8, #F4EBD7);
  animation: pcPulse 1.7s ease-in-out infinite;
}
@keyframes pcPulse { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) {
  .loadingPlaceholder { animation: none; opacity: .8; }
}

/* -- Error / not-found state -- */
.viewErrorState {
  max-width: 480px;
  margin: 64px auto 0;
  text-align: center;
}
.viewErrorState h1 {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 26px;
  color: #F6F1E4;
}
.viewErrorState p {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--pc-text-muted);
}

/* -- Action bar -- */
.actionBar {
  position: static;
  z-index: 30;
  margin: 24px 0 0;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  background: rgba(20, 27, 61, .82);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(240, 200, 120, .2);
  border-radius: 14px;
}
.actionBarLeft,
.actionBarRight {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.actionBar .btn-primary,
.actionBar .btn-secondary {
  padding: 10px 18px;
  font-size: 14px;
}
.stylePillGroup {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(240, 200, 120, .28);
  border-radius: 999px;
  padding: 4px;
}
.stylePill {
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  background: transparent;
  color: var(--pc-text-muted);
}
.stylePill.active {
  background: linear-gradient(180deg, var(--pc-cta-a), var(--pc-cta-b));
  color: var(--pc-cta-text);
}

/* Sticky action bar is a mobile-specific convenience (spec: "sticky top on
   mobile"); on wider viewports it stays inline with the page so it doesn't
   permanently occupy screen space above a page this long. */
@media (max-width: 720px) {
  .actionBar {
    position: sticky;
    top: 8px;
    margin-top: 12px;
  }
}

.sheetMountWrap { margin-top: 20px; }

/* -- Toast (kundli pages: bottom center, ink on gold; distinct from the
   simulator's top-center red error toast in style.css) -- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--pc-cta-a), var(--pc-cta-b));
  color: var(--pc-cta-text);
  padding: 11px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 28px rgba(6, 9, 26, .4);
  z-index: 1000;
  max-width: 90vw;
  text-align: center;
}
.toast.hidden { display: none; }

/* ==========================================================================
   The sheet (shared by both pages via kundli.js renderSheet/fitSheet)
   Single-theme "luxury print artifact" look: intentionally ignores the
   page's dark theme and prefers-color-scheme; a kundli should look the
   same whether the viewer's OS/browser is in light or dark mode.
   ========================================================================== */

.sheetWrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.sheet {
  position: relative;
  width: var(--sh-width);
  background: var(--sh-paper);
  border: 2px solid var(--sh-gold);
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(20, 16, 8, .35);
  padding: 6px;
}
.sheet::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--sh-gold-light);
  border-radius: 4px;
  pointer-events: none;
}

/* Corner ticks: two short gold strokes per corner, pure CSS (no ornament,
   per spec: "keep them quiet, no mandala ornaments"). Built from a single
   .tick element per corner using ::before (horizontal stroke) and ::after
   (vertical stroke); each corner class flips which edge the strokes sit on. */
.tick { position: absolute; width: 16px; height: 16px; pointer-events: none; }
.tick::before, .tick::after { content: ""; position: absolute; background: var(--sh-gold); }
.tick::before { width: 100%; height: 1.5px; top: 0; left: 0; }
.tick::after { width: 1.5px; height: 100%; top: 0; left: 0; }
.tick-tl { top: 14px; left: 14px; }
.tick-tr { top: 14px; right: 14px; }
.tick-tr::before, .tick-tr::after { left: auto; right: 0; }
.tick-bl { bottom: 14px; left: 14px; }
.tick-bl::before, .tick-bl::after { top: auto; bottom: 0; }
.tick-br { bottom: 14px; right: 14px; }
.tick-br::before, .tick-br::after { top: auto; bottom: 0; left: auto; right: 0; }

.sheetInner {
  position: relative;
  padding: 22px 30px 26px;
  font-family: var(--font-body);
  color: var(--sh-ink);
}

/* -- Header -- */
.sheetHeader {
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--sh-gold-light);
}
.sheetOm {
  font-family: var(--font-deva);
  font-size: 22px;
  color: var(--sh-gold);
  line-height: 1;
}
.sheetKicker {
  margin-top: 8px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--sh-muted);
}
.sheetH1 {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: .01em;
  color: var(--sh-ink);
  line-height: 1.15;
}
.sheetH1 .dev {
  display: block;
  margin-top: 4px;
  font-family: var(--font-deva);
  font-weight: 600;
  font-size: 17px;
  color: var(--sh-gold);
}
.sheetName {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--sh-ink);
}
.sheetBirthLine,
.sheetCoordsLine {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--sh-muted);
}

/* -- Section titles: small-caps letterspaced Fraunces with thin gold rules
   either side, used for the D1/D9/D10 chart-card titles. -- */
.sectionTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-variant: small-caps;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--sh-gold);
  text-transform: lowercase; /* paired with font-variant small-caps */
}
.sectionTitle::before,
.sectionTitle::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--sh-gold-light);
  max-width: 46px;
}

/* -- Grid: D1 chart + right-hand vitals/panchang/dasha panel -- */
.sheetGrid {
  display: grid;
  grid-template-columns: 1fr 244px;
  gap: 16px;
  margin-top: 14px;
}

.chartCard {
  background: linear-gradient(180deg, #FFFDF6, #FDF1D6);
  border: 1.5px solid var(--sh-gold-light);
  border-radius: 8px;
  padding: 12px 12px 8px;
}
.chartBody svg { display: block; width: 100%; height: auto; }
.chartSub {
  margin-top: 6px;
  text-align: center;
  font-size: 9.5px;
  letter-spacing: .03em;
  color: var(--sh-muted);
}

.panel { display: flex; flex-direction: column; gap: 10px; }

.panelBlock {
  background: linear-gradient(180deg, #FFF8E8, #F8E5BE);
  border: 1.5px solid var(--sh-gold-light);
  border-radius: 8px;
  overflow: hidden;
}
.panelHead {
  margin: 0;
  padding: 6px;
  background: var(--sh-band);
  color: var(--sh-ink);
  font-family: var(--font-display);
  font-variant: small-caps;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: lowercase;
  text-align: center;
}

.vrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 6px 12px;
  border-bottom: 1px dashed rgba(184, 134, 11, .35);
  font-size: 11.5px;
}
.vrow:last-child { border-bottom: none; }
.vrow .k { color: var(--sh-muted); flex: none; }
.vrow .v {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--sh-ink);
  text-align: right;
}
.vrow .v .sub {
  display: inline;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 9.5px;
  color: var(--sh-muted);
}

.pgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(184, 134, 11, .25);
}
.pgrid.single { grid-template-columns: 1fr; }
.pcell { background: #FFF8E8; padding: 6px 10px; }
.pcell .k {
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sh-muted);
}
.pcell .v {
  margin-top: 2px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--sh-ink);
}
.pcell .v .sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 9.5px;
  color: var(--sh-muted);
}

/* -- D9 / D10 row -- */
.divisionals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

/* -- Planet table -- */
.tableCard {
  margin-top: 16px;
  border: 1.5px solid var(--sh-gold-light);
  border-radius: 8px;
  overflow: hidden;
}
/* .dashaTable (the Vimshottari Dasha section's two mahadasha/antardasha
   tables), .kootaTable (the match sheet's Ashtakoota table), and
   .aspectsTable (the Graha Drishti aspects table) share every rule below
   with .planetTable, so the four skins can never drift apart -- EXCEPT the
   column-padding rule further down, which stays .planetTable-only: that one
   targets planet-table columns 3/4 specifically (Degree, Nakshatra), a
   concern .dashaTable's own 3 columns (Lord/From/To), .kootaTable's own 3
   columns (Guna/Score/Note), .aspectsTable's own 3 columns (Graha/
   Aspects houses/Aspects grahas), and .savTable's own 4 columns (House/
   Rashi/Bindus/Support) do not share. */
.planetTable,
.dashaTable,
.kootaTable,
.aspectsTable,
.savTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.planetTable thead th,
.dashaTable thead th,
.kootaTable thead th,
.aspectsTable thead th,
.savTable thead th {
  background: var(--sh-band);
  color: var(--sh-ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 7px 8px;
  text-align: left;
}
.planetTable tbody td,
.dashaTable tbody td,
.kootaTable tbody td,
.aspectsTable tbody td,
.savTable tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(184, 134, 11, .25);
  vertical-align: middle;
}
.planetTable tbody tr:nth-child(odd),
.dashaTable tbody tr:nth-child(odd),
.kootaTable tbody tr:nth-child(odd),
.aspectsTable tbody tr:nth-child(odd),
.savTable tbody tr:nth-child(odd) { background: rgba(184, 134, 11, .05); }
.planetTable tbody tr:nth-child(even),
.dashaTable tbody tr:nth-child(even),
.kootaTable tbody tr:nth-child(even),
.aspectsTable tbody tr:nth-child(even),
.savTable tbody tr:nth-child(even) { background: rgba(217, 171, 76, .09); }

/* Degree (3rd column) and Nakshatra (4th column) carry the tightest
   unbreakable content of the planet table's nine columns (a bare
   D°MM'SS" token; the longest single nakshatra word, e.g. "Shatabhisha"):
   trimming their padding is what buys the new Avastha/Bala columns room
   to join the row without the table (fixed at the sheet's own 794px, no
   horizontal scroll ever allowed inside it) overflowing. */
.planetTable thead th:nth-child(3),
.planetTable thead th:nth-child(4),
.planetTable tbody td:nth-child(3),
.planetTable tbody td:nth-child(4) {
  padding-left: 5px;
  padding-right: 5px;
}

.planetCell { display: flex; flex-direction: column; gap: 1px; }
.planetCell .nm { font-weight: 700; color: var(--sh-gold); }
.planetCell .sk,
.signCell .sk,
.balaCell .sk,
.gunaCell .sk {
  font-size: 9px;
  font-weight: 400;
  color: var(--sh-muted);
}
.signCell { display: flex; flex-direction: column; gap: 1px; }

/* BALA column cell: virupa total (gold, bold -- same treatment as the
   graha name cell) over the BPHS-ratio (muted small, reusing .sk above);
   Rahu/Ketu (and any row degraded by a failed shadbala call, see
   kundli.py's build_kundli_payload) instead get a single centered dot. */
.balaCell { display: flex; flex-direction: column; gap: 1px; }
.balaCell .nm { font-weight: 700; color: var(--sh-gold); }
.balaCell .dot { text-align: center; color: var(--sh-muted); }

.retro {
  color: var(--sh-terracotta);
  font-weight: 700;
  font-size: 8.5px;
  vertical-align: super;
  margin-left: 2px;
}

.legend {
  padding: 6px;
  background: #FFF8E8;
  text-align: center;
  font-size: 9px;
  color: var(--sh-muted);
  letter-spacing: .02em;
}

/* -- Graha Drishti (Aspects) section: single aspects table. Reuses
   .tableCard/.aspectsTable/.legend wholesale (see the shared-table-group
   comment above and buildAspectsSection in kundli.js); the section itself
   only needs the same top-margin rhythm every other page-level section
   here uses (.dashaSection, .cautionsSection below). -- */
.aspectsSection { margin-top: 16px; }

/* -- Sarvashtakavarga (Support) section: single 12-row SAV table. Reuses
   .tableCard/.savTable/.legend wholesale (see the shared-table-group
   comment above and buildSavSection in kundli.js), so it carries the exact
   same skin as the planet, dasha, koota and aspects tables; the section
   itself only needs the same top-margin rhythm as .aspectsSection above. --
   The band pill is the one thing of its own: a small uppercase tag that
   lets a reader spot the strong and gentle houses without re-reading the
   bindu column. "average" stays deliberately quiet (muted, no fill), since
   most houses land there and twelve loud pills would say nothing. */
.savSection { margin-top: 16px; }

/* House (1st) and Bindus (3rd) are short numeric columns; keeping them
   narrow leaves the Rashi column room for its "English (Sanskrit)" label
   inside the sheet's fixed 794px (no horizontal scroll, ever). */
.savTable thead th:nth-child(1),
.savTable thead th:nth-child(3),
.savTable tbody td:nth-child(1),
.savTable tbody td:nth-child(3) {
  width: 68px;
}

.savBand {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sh-muted);
}
.savBand.strong {
  background: rgba(184, 134, 11, .18);
  color: var(--sh-gold);
}
.savBand.gentle {
  background: rgba(169, 78, 61, .14);
  color: var(--sh-terracotta);
}

/* -- Vimshottari Dasha section: full mahadasha/antardasha tables -- */
.dashaSection { margin-top: 16px; }
.dashaGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.dashaGrid.single { grid-template-columns: 1fr; }

/* Reuses .tableCard's border/radius/overflow chrome; its own margin-top
   is switched off here since .sectionTitle's bottom margin above it
   already spaces the grid from the section title (margins on a grid ITEM
   never collapse with anything outside the grid, so left alone this
   would add on top of that spacing rather than share it). */
.dashaCard { margin-top: 0; }

/* Current mahadasha/antardasha row: a pale gold highlight, one shade
   stronger than the zebra tints above so it reads clearly over either
   stripe, plus a small "now" tag next to the lord. */
.dashaTable tbody tr.rowCurrent {
  background: rgba(217, 171, 76, .3);
}
.nowTag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(111, 107, 94, .16);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--sh-muted);
  vertical-align: middle;
}

/* ==========================================================================
   Match sheet additions (renderMatchSheet in kundli.js): score block,
   two-person row and the Ashtakoota/cautions blocks. Everything else on the
   match sheet (header, tableCard skin, section titles, footer) reuses the
   kundli sheet rules above unchanged.
   ========================================================================== */

/* -- Score block: centered total + headline, directly under the header -- */
.scoreBlock {
  margin-top: 14px;
  padding: 18px 20px 16px;
  text-align: center;
  background: linear-gradient(180deg, #FFF8E8, #F8E5BE);
  border: 1.5px solid var(--sh-gold-light);
  border-radius: 8px;
}
.scoreTotal {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: var(--sh-gold);
}
.scoreMax {
  margin-top: 4px;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sh-muted);
}
.scoreHeadline {
  margin-top: 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 17px;
  color: var(--sh-ink);
}
.scoreGloss {
  margin-top: 4px;
  font-size: 11px;
  color: var(--sh-muted);
}

/* -- Two-person row: Boy card + Girl card, each its own vitals + D1 chart.
   No viewport breakpoint here either, matching the sheet-wide rule (see the
   NOTE further down): .sheet is always a fixed 794px box; fitSheet's scale
   transform is the only responsive mechanism. -- */
.personRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.personCard {
  background: linear-gradient(180deg, #FFF8E8, #F8E5BE);
  border: 1.5px solid var(--sh-gold-light);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.personHead {
  display: flex;
  align-items: center;
  gap: 10px;
}
.personRole {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(217, 171, 76, .18);
  font-family: var(--font-display);
  font-variant: small-caps;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: lowercase; /* paired with font-variant small-caps, see .sectionTitle above */
  color: var(--sh-gold);
}
.personName {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--sh-ink);
}

/* -- Ashtakoota table: Guna | Score | Note. Guna cell mirrors the planet
   table's own two-line nm/sk cells (buildPlanetRow): koota name on top,
   its plain-English gloss underneath in the same muted "sk" treatment
   (".gunaCell .sk" joins that shared selector list further up). Column
   widths give Note (a full descriptive sentence per koota, the longest
   and most variable content) the most room; Guna and Score stay compact. -- */
.gunaCell { display: flex; flex-direction: column; gap: 1px; }

.kootaTable thead th:nth-child(1),
.kootaTable tbody td:nth-child(1) { width: 30%; }
.kootaTable thead th:nth-child(2),
.kootaTable tbody td:nth-child(2) { width: 14%; }
.kootaTable thead th:nth-child(3),
.kootaTable tbody td:nth-child(3) { width: 56%; }

/* Score cell: bold ink when the koota (or the grand total, in the totals
   row below) scored full points, muted regular weight otherwise -- the
   same bold-when-full, muted-when-partial convention as the luxury match
   card's own ledger (chartviz/matchcard.py's _draw_ledger, ~line 822:
   "fill=_INK if full else _INK_MUTED"). font-variant-numeric: tabular-nums
   already applies from the shared .kootaTable rule above either way. */
.kootaFull {
  font-weight: 700;
  color: var(--sh-ink);
}
.kootaPartial {
  font-weight: 400;
  color: var(--sh-muted);
}

/* -- Ashtakoota totals row: same gold highlight as the dasha table's
   current-row treatment (.dashaTable tbody tr.rowCurrent), reused verbatim
   so the two "this row matters" cues read as one visual language. -- */
.kootaTable tbody tr.kootaTotalRow {
  background: rgba(217, 171, 76, .3);
}
.kootaTotalRow td {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--sh-ink);
}
/* .kootaTotalRow td (above) unconditionally bolds every cell in the totals
   row; without this override a not-full grand total would still render
   bold ink instead of muted, since ".kootaTotalRow td" (a class + element)
   out-specifies ".kootaPartial" alone (a single class). */
.kootaTotalRow td.kootaPartial {
  font-weight: 400;
  color: var(--sh-muted);
}

/* -- Cautions: nadi / bhakoot / manglik, reusing the vitals row (.vrow)
   treatment inside the shared tableCard chrome. -- */
.cautionsSection { margin-top: 16px; }
.cautionsBlock {
  padding: 2px 8px;
  background: linear-gradient(180deg, #FFF8E8, #F8E5BE);
}
.cautionsBlock .vrow { padding: 9px 8px; }

/* Quiet terracotta emphasis for a flagged row (nadi/bhakoot dosha present):
   a soft background tint and a terracotta value, no borders or bold shouting. */
.vrow.flagRow {
  background: rgba(169, 78, 61, .08);
  border-radius: 6px;
}
.vrow.flagRow .v { color: var(--sh-terracotta); }

/* -- Footer band -- */
.sheetFooter {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1.5px solid var(--sh-gold-light);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}
.footerBrand { display: flex; align-items: center; gap: 11px; }
.footerBrand .mark { width: 38px; height: 38px; flex: none; }
.footerBrandText .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--sh-ink);
}
.footerBrandText .name .io { color: var(--sh-gold); }
.footerBrandText .tag {
  margin-top: 2px;
  font-size: 9px;
  color: var(--sh-muted);
}
.footerBrandText .gen {
  margin-top: 3px;
  font-size: 9px;
  color: var(--sh-muted);
}

.footerQr { display: flex; align-items: center; gap: 11px; }
.qrCaption { text-align: right; max-width: 130px; }
.qrCaption .big {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--sh-ink);
  line-height: 1.2;
}
.qrCaption .sm {
  margin-top: 3px;
  font-size: 8.5px;
  color: var(--sh-muted);
}
.qrTile {
  width: 68px;
  height: 68px;
  padding: 5px;
  border: 2px solid var(--sh-gold);
  border-radius: 8px;
  background: #FFF;
  flex: none;
}
.qrTile svg { display: block; width: 100%; height: 100%; }

.sheetDisclaimer {
  margin-top: 12px;
  text-align: center;
  font-size: 8.5px;
  color: var(--sh-muted);
  letter-spacing: .02em;
}

/* NOTE: the sheet deliberately has NO viewport-width breakpoints for its
   internal grids (.sheetGrid / .divisionals / .dashaGrid / .personRow).
   .sheet is a fixed 794px layout box always; fitSheet()'s transform:scale is
   the ONLY responsive mechanism, so the print-artifact proportions never
   reflow, at any viewport width. A max-width media query here would fire
   based on the VIEWPORT, not the sheet's own (constant) 794px width, and
   would stack the D1+panel/D9+D10/dasha/person grids while the sheet is
   still a 794px box, throwing off fitSheet()'s own height measurement. */

/* ============ Print ============
   The sheet as an actual A4 print artifact: page chrome (topbar, form,
   action bar, disclaimer, sky backdrop) hidden entirely, sheet unscaled
   (fitSheet's transform stripped) and laid flat on a plain white page. */
@media print {
  @page { size: A4; margin: 0; }
  body { background: #FFF; }
  #sky,
  .topbar,
  .introWrap,
  .formWrap,
  .exampleSection,
  .actionBar,
  .viewErrorState,
  .loadingPlaceholder,
  .page-disclaimer,
  .toast,
  .ribbon {
    display: none !important;
  }
  .viewWrap { max-width: none; padding: 0; margin: 0; }
  .sheetMountWrap { margin: 0; }
  .sheetWrap { width: auto; height: auto !important; overflow: visible; }
  .sheet {
    transform: none !important;
    box-shadow: none;
    margin: 0 auto;
  }
}