/* Embed view: the calculator only, sized to sit in someone else's page.
   Loads after calculator.css and overrides the page chrome away. */

body.embed {
  background: var(--desk);
  background-image: none;
  padding: 0;
}

/* Stay two-column as far down as the content allows. Stacking nearly doubles the
   height (1092px -> ~1770px), and a host page with a fixed iframe height can't
   absorb that, so the breakpoint sits at 560px rather than the usual 700. */
.embed__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  gap: .8rem;
  align-items: start;
  padding: .8rem;
  max-width: 900px;
  margin: 0 auto;
}

/* The receipt must not stick inside an iframe — there is nothing to scroll past. */
.embed .receipt-wrap { position: static; }

.embed .panel { padding: 1.1rem 1.1rem 1.2rem; }
.embed .panel__title { margin-bottom: .75rem; }
.embed .panel .panel__title:not(:first-child) { margin-top: 1.3rem; }
.embed .receipt { padding: 1.1rem 1.1rem .2rem; }
.embed .receipt__figure { font-size: 2.1rem; }

.embed .receipt__foot .copy {
  text-decoration: none;
  color: var(--muted);
}
.embed .receipt__foot .copy:hover { color: var(--sticker); border-color: var(--sticker); }

@media (max-width: 560px) {
  .embed__grid { grid-template-columns: 1fr; }
}