/* ── EMBEDDABLE WIDGET (frontend/embed/*) + its landing page ─────────────────
   Loaded after /learn/learn.css?v=7ee6fcd8f4, which supplies the :root tokens and the .tool-* widget styles.
   The widget runs inside an <iframe> on other sites, so it is compact: the result shows the current
   period and its exact dates, and the long sequence tables stay on nyovah.com behind the CTA. */

body.embed {
  background: transparent;          /* the host page shows through; the form is its own white card */
  font-size: 15px;
  line-height: 1.5;
}

.embed .tool-widget {
  max-width: 100%;
  margin: 0;
  padding: 8px;
}

.embed .tool-form { padding: 16px 14px; }

/* Compact result: the headline + facts + CTA. The long sequence tables and prose stay on nyovah.com
   behind the CTA. A section title is kept ONLY when it labels a facts block (.tool-highlight) — e.g.
   Manglik's "Cancellations & mitigations" — so a fact block is never left without its label. Without
   :has() support those titles simply stay hidden, which is the safe direction. */
.embed .tool-section-title,
.embed .tool-table-wrap,
.embed .tool-reco { display: none; }
.embed .tool-section-title:has(+ .tool-highlight) { display: block; }
/* In such a labelled block (Manglik cancellations) the row LABEL is the finding — "Jupiter aspect (full
   cancellation)" — and the value is a long citation. Keep the finding, leave the citation for the full page. */
.embed .tool-section-title:has(+ .tool-highlight) + .tool-highlight .tool-row-val { display: none; }

.embed .tool-cta-inline { margin: 14px 0 2px; }

/* Result replaces the form (see embed.js) so both states fit the host's single fixed iframe height. */
.embed-again { display: none; }
.embed-has-result .tool-form,
.embed-has-result .tool-submit { display: none; }
.embed-has-result .embed-again {
  display: block;
  margin: 10px auto 0;
  padding: 8px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--gold-dim);
  background: transparent;
  border: 1px solid var(--gold-lt);
  border-radius: var(--r);
  cursor: pointer;
}
.embed-has-result .embed-again:hover { background: var(--gold-lt); }
.embed-has-result .embed-again:focus-visible { outline: 2px solid var(--gold-dim); outline-offset: 2px; }

.embed-credit {
  margin: 6px 8px 8px;
  font-size: 12px;
  text-align: center;
  color: var(--ink-60);
}
.embed-credit a { color: var(--gold-dim); text-decoration: underline; }

/* ── LANDING PAGE (/dasha-widget.html): the copy-paste box + live preview ── */

.embed-code {
  display: block;
  width: 100%;
  margin: 12px 0 4px;
  padding: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--gold-lt);
  border-radius: var(--r);
  resize: vertical;
  white-space: pre;
  overflow-x: auto;
}
.embed-code:focus { outline: 2px solid var(--gold-dim); outline-offset: 2px; }

.embed-hindi { margin: 4px 0 8px; }
.embed-hindi summary { cursor: pointer; color: var(--gold-dim); font-size: 15px; padding: 4px 0; }
.embed-hindi summary:focus-visible { outline: 2px solid var(--gold-dim); outline-offset: 2px; }

/* height comes from each iframe's own height attribute — it is the same height its snippet recommends */
.embed-preview {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 16px auto;
  border: 1px solid var(--gold-lt);
  border-radius: var(--r);
  background: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  .embed * { animation: none !important; transition: none !important; }
}