/* ============================================================================
   vedic-report.css — the full cited horoscope, in Acharya Anand's heritage skin.
   ----------------------------------------------------------------------------
   The document is a PAPER document that happens to be on screen: cream ground,
   gold rules, navy ink, saffron chapter heads. Screen and print are the same
   design — printing removes the chrome, it does not switch to another look.

   PDF is made by the browser's own print engine (@page below), NOT html2pdf:
   a 100+ page report rasterised by html2pdf loses selectable text and chokes.
   ========================================================================== */

.vr-shell{max-width:940px;margin:0 auto;padding:0 16px 72px}

/* ── the birth form intro ─────────────────────────────────────────────────── */
.vr-lede{font-size:15px;color:var(--muted,#585260);line-height:1.75;max-width:660px;margin:0 auto 26px;text-align:center}
.vr-shell .form-help{display:block;font-size:12px;color:var(--muted,#585260);margin:-8px 2px 0;line-height:1.5}
.vr-shell .form-group{margin-bottom:16px}

/* ── the document ─────────────────────────────────────────────────────────── */
.vr-doc{background:var(--light,#FFFDF7);border:1px solid var(--line,#E0D7C6);border-radius:20px;
  box-shadow:7px 7px 16px var(--dark,#D4CAB8),-7px -7px 16px #FFFDF7;
  padding:clamp(22px,4vw,52px);margin-top:22px}

/* masthead ------------------------------------------------------------------ */
.vr-mast{text-align:center;border-bottom:1px solid var(--line,#E0D7C6);padding-bottom:26px;margin-bottom:8px}
.vr-seal{width:58px;height:58px;border-radius:15px;margin:0 auto 12px;display:block}
.vr-om{font-family:var(--disp,Georgia,serif);color:var(--saf-2,#B8620C);font-size:17px;letter-spacing:.06em;margin:0 0 8px}
.vr-name{font-family:var(--disp,Georgia,serif);font-size:clamp(28px,4.4vw,38px);color:var(--navy-900,#0D1226);
  font-weight:700;margin:2px 0 6px;line-height:1.14}
.vr-born{font-size:13.5px;color:var(--muted,#585260);line-height:1.7}
.vr-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.vr-chip{background:var(--stone,#ECE6DA);border-radius:12px;padding:8px 15px;min-width:98px;
  box-shadow:inset 3px 3px 7px var(--dark,#D4CAB8),inset -3px -3px 7px #FFFDF7}
.vr-chip small{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#585260)}
.vr-chip b{display:block;font-family:var(--disp,Georgia,serif);font-size:17px;color:var(--navy-900,#0D1226);margin-top:2px}

/* the birth-time caveat — rule 7, never hidden ------------------------------ */
.vr-caveat{margin:18px auto 0;max-width:640px;background:rgba(217,119,6,.07);border:1px solid rgba(217,119,6,.22);
  border-radius:12px;padding:11px 15px;font-size:12.5px;color:#8A5A12;line-height:1.6}

/* ── contents ─────────────────────────────────────────────────────────────── */
.vr-toc{margin:28px 0 6px;padding:20px 22px;background:var(--stone,#ECE6DA);border-radius:16px;
  box-shadow:inset 3px 3px 8px var(--dark,#D4CAB8),inset -3px -3px 8px #FFFDF7}
.vr-toc h2{font-family:var(--disp,Georgia,serif);font-size:15px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted,#585260);margin:0 0 12px;font-weight:600}
.vr-toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:2px 20px;counter-reset:vrtoc}
.vr-toc li{counter-increment:vrtoc}
.vr-toc a{display:flex;gap:9px;align-items:baseline;padding:5px 0;font-size:13.5px;color:var(--ink-2,#403C49);
  text-decoration:none;border-bottom:1px solid transparent}
.vr-toc a::before{content:counter(vrtoc);font-family:var(--disp,Georgia,serif);font-size:11.5px;color:var(--gold-2,#B8860B);min-width:15px}
.vr-toc a:hover{color:var(--saf-2,#B8620C)}

/* ── chapters ─────────────────────────────────────────────────────────────── */
.vr-ch{margin-top:38px;scroll-margin-top:90px}
.vr-ch>h2{font-family:var(--disp,Georgia,serif);font-size:clamp(21px,2.6vw,26px);color:var(--navy-900,#0D1226);
  font-weight:700;margin:0 0 4px;line-height:1.25;
  border-bottom:2px solid var(--gold,#C8A44D);padding-bottom:9px;display:flex;align-items:baseline;gap:10px}
.vr-ch>h2 .n{font-size:13px;color:var(--gold-2,#B8860B);font-weight:600;letter-spacing:.05em}
.vr-ch>h2 .en{font-size:14px;color:var(--muted,#585260);font-weight:400}
.vr-ch-note{font-size:13px;color:var(--muted,#585260);line-height:1.7;margin:10px 0 0}
.vr-sub{font-family:var(--disp,Georgia,serif);font-size:17px;color:var(--saf-2,#B8620C);margin:24px 0 10px;font-weight:600}

/* cards --------------------------------------------------------------------- */
.vr-card{background:var(--stone,#ECE6DA);border-radius:15px;padding:16px 18px;margin-top:14px;
  box-shadow:inset 3px 3px 8px var(--dark,#D4CAB8),inset -3px -3px 8px #FFFDF7}
.vr-card.plain{background:transparent;box-shadow:none;border:1px solid var(--line,#E0D7C6);padding:15px 17px}
.vr-kv{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px;color:var(--ink-2,#403C49);line-height:1.9}
.vr-kv b{color:var(--navy-900,#0D1226);font-weight:600}
.vr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:14px}

/* tables -------------------------------------------------------------------- */
.vr-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:14px;border-radius:12px}
table.vr-t{width:100%;border-collapse:collapse;font-size:12.8px;background:var(--light,#FFFDF7)}
table.vr-t th{background:var(--stone,#ECE6DA);color:var(--ink-2,#403C49);font-weight:600;text-align:left;
  padding:9px 11px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--line,#E0D7C6);white-space:nowrap}
table.vr-t td{padding:8px 11px;border-bottom:1px solid rgba(224,215,198,.65);color:var(--ink-2,#403C49);vertical-align:top}
table.vr-t tr:last-child td{border-bottom:none}
table.vr-t td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
table.vr-t td b{color:var(--navy-900,#0D1226)}
.vr-retro{color:#B02A20;font-weight:600}

/* verdict pills — colour follows the ENGINE's own status, never our optimism */
.vr-pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;padding:3px 10px;border-radius:999px;
  border:1px solid transparent;white-space:nowrap}
.vr-pill.on{background:rgba(22,120,70,.10);color:#166E46;border-color:rgba(22,120,70,.28)}
.vr-pill.off{background:rgba(88,82,96,.09);color:#585260;border-color:rgba(88,82,96,.22)}
.vr-pill.warn{background:rgba(176,42,32,.09);color:#B02A20;border-color:rgba(176,42,32,.26)}
.vr-pill.part{background:rgba(217,119,6,.10);color:#8A5A12;border-color:rgba(217,119,6,.28)}

/* citations — the moat (rule 2) --------------------------------------------- */
.vr-cite{margin-top:12px;border-left:3px solid var(--gold,#C8A44D);padding:9px 0 9px 14px;
  font-size:12.5px;color:var(--ink-2,#403C49);line-height:1.7}
.vr-cite q{font-style:italic;quotes:'“' '”'}
.vr-cite .ref{display:block;margin-top:5px;font-size:11px;letter-spacing:.04em;color:var(--gold-2,#B8860B);font-weight:600}

/* provenance strip — which engine, which status ----------------------------- */
.vr-src{margin-top:10px;font-size:11px;color:var(--muted,#585260);letter-spacing:.02em}
.vr-src code{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;background:rgba(200,164,77,.13);
  padding:1px 6px;border-radius:5px;color:#7A5B12}

/* honest empty state (rule 4) ----------------------------------------------- */
.vr-empty{margin-top:14px;padding:13px 16px;border:1px dashed var(--line,#E0D7C6);border-radius:12px;
  font-size:13px;color:var(--muted,#585260);line-height:1.65;background:rgba(236,230,218,.4)}

/* chart svg ----------------------------------------------------------------- */
.vr-charts{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:18px;margin-top:16px}
.vr-chart figcaption{text-align:center;font-size:12px;color:var(--muted,#585260);margin-top:7px;line-height:1.5}
.vr-chart svg{width:100%;height:auto;display:block}

/* loading ------------------------------------------------------------------- */
.vr-load{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted,#585260);padding:11px 0}
.vr-load i{width:13px;height:13px;border-radius:50%;border:2px solid var(--gold,#C8A44D);border-top-color:transparent;
  animation:vrspin .8s linear infinite;display:inline-block}
@keyframes vrspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.vr-load i{animation:none}}

/* progress + toolbar -------------------------------------------------------- */
.vr-bar{position:sticky;top:64px;z-index:30;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  background:rgba(252,250,244,.94);backdrop-filter:blur(8px);border:1px solid var(--line,#E0D7C6);
  border-radius:14px;padding:10px 14px;margin-top:18px}
.vr-bar .grow{flex:1 1 130px;min-width:110px}
.vr-prog{height:5px;border-radius:99px;background:var(--stone,#ECE6DA);overflow:hidden;
  box-shadow:inset 1px 1px 3px var(--dark,#D4CAB8)}
.vr-prog i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--gold,#C8A44D),var(--saf,#D97706));transition:width .35s ease}
.vr-bar label{font-size:11px;color:var(--muted,#585260);letter-spacing:.04em}
.vr-bar select{font-family:var(--ui,inherit);font-size:12.5px;border:none;border-radius:10px;padding:8px 11px;
  background:var(--stone,#ECE6DA);color:var(--ink,#181725);
  box-shadow:inset 2px 2px 5px var(--dark,#D4CAB8),inset -2px -2px 5px #FFFDF7}
.vr-bar .st{font-size:11.5px;color:var(--muted,#585260);white-space:nowrap}

/* signature ----------------------------------------------------------------- */
.vr-sign{margin-top:46px;padding-top:26px;border-top:1px solid var(--line,#E0D7C6)}
.vr-sign p{font-size:14px;color:var(--ink-2,#403C49);line-height:1.85;margin:0 0 12px;max-width:660px}
.vr-sign .nm{font-family:var(--disp,Georgia,serif);font-size:23px;color:var(--navy-900,#0D1226);font-weight:700;margin-top:20px}
.vr-sign .sub{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-2,#B8860B);margin-top:3px}
.vr-note{font-size:12px;color:var(--muted,#585260);line-height:1.65;font-style:italic;margin-top:10px}

.vr-tools{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}

@media (max-width:560px){
  .vr-doc{padding:20px 15px;border-radius:16px}
  .vr-toc ol{grid-template-columns:1fr}
  .vr-bar{top:58px;padding:9px 11px}
}

/* ══════════════════════════════════════════════════════════════════════════
   PRINT — this is the PDF. Same document, chrome removed.
   ══════════════════════════════════════════════════════════════════════════ */
@page{size:A4;margin:1.4cm}
@page:first{margin-top:1.1cm}

@media print{
  /* site chrome and every control disappears */
  /* NOTE the :not(.vr-toc) — the table of contents IS a <nav>, and a bare `nav`
     rule here silently dropped the Contents page from every printed PDF. */
  header,footer,nav:not(.vr-toc),.site-header,.site-footer,.topbar,.announce,.wa-float,.whatsapp-float,
  .vr-bar,.vr-tools,.vr-load,.noprint,[data-noprint]{display:none!important}

  html,body{background:#fff!important;margin:0!important;padding:0!important}
  body{font-size:10.5pt;color:#1a1a1a}

  .vr-shell{max-width:none;padding:0;margin:0}
  .vr-doc{box-shadow:none!important;border:none!important;border-radius:0!important;padding:0!important;margin:0!important;background:#fff!important}

  /* neumorphic depth is a screen idea — on paper it becomes grey mud */
  .vr-card,.vr-chip,.vr-toc{box-shadow:none!important;background:#FBF8F1!important;border:1px solid #E2D9C6!important}
  .vr-empty{background:#fff!important}
  /* the chart's raised plate is an SVG filter, not a box-shadow — a CSS shadow
     reset cannot reach it, and it forces the whole chart to rasterise on paper */
  .vr-chart svg [filter],.vr-chart svg{filter:none!important}

  /* never split what must be read together (handover §4) */
  .vr-card,.vr-cite,.vr-chart,figure,.vr-chip,.vr-empty,.vr-sign{break-inside:avoid;page-break-inside:avoid}
  table.vr-t{break-inside:auto}
  table.vr-t tr,table.vr-t thead{break-inside:avoid;page-break-inside:avoid}
  table.vr-t thead{display:table-header-group}
  .vr-ch>h2,.vr-sub{break-after:avoid;page-break-after:avoid}
  h2,h3{orphans:3;widows:3}
  p,li{orphans:2;widows:2}

  /* one chapter per page keeps the reading orderly */
  .vr-ch{break-before:page;page-break-before:always;margin-top:0;padding-top:2mm}
  .vr-ch:first-of-type{break-before:avoid;page-break-before:avoid}

  /* tables must not be cut off at the paper edge */
  .vr-tw{overflow:visible!important}
  table.vr-t{font-size:8.6pt}
  table.vr-t th,table.vr-t td{padding:4px 6px}

  .vr-toc{break-after:page;page-break-after:always}
  .vr-charts{grid-template-columns:repeat(2,1fr)}
  a{color:inherit;text-decoration:none}

  /* A position:fixed running footer printed at the TOP of every page from 3 onward,
     colliding with the chapter titles. Browsers do not agree on fixed elements in
     paged media, so the identification line prints ONCE, at the end of the document,
     where it cannot collide with anything. */
  .vr-runfoot{display:block!important;position:static;text-align:center;margin-top:10mm;
    padding-top:3mm;border-top:1px solid #E2D9C6;font-size:8pt;color:#7a736a;letter-spacing:.03em;
    break-inside:avoid;page-break-inside:avoid}
}
.vr-runfoot{display:none}

/* print-scope: hand a client the four pages they asked about, not all of it.
   The <select> stamps data-print-scope on <html>; only that chapter prints. */
@media print{
  html[data-print-scope]:not([data-print-scope="all"]) .vr-ch{display:none!important}
  html[data-print-scope]:not([data-print-scope="all"]) .vr-ch.print-on{display:block!important;break-before:avoid;page-break-before:avoid}
  html[data-print-scope]:not([data-print-scope="all"]) .vr-toc{display:none!important}
}