/* ==========================================================================
   AspectCalc — embed.css
   Loaded only by /embed. Everything here exists to turn the full calculator
   into a small, chrome-free widget that can sit inside someone else's column
   without a header, a footer, an ad, or a heading of its own.

   What the widget shows: the Resize-by-Ratio control set only (preset chips,
   Ratio Width/Height, New Width/Height, the result rows, the three copy
   buttons) beside the live Visual Preview, with one "Powered by AspectCalc"
   line at the foot.

   Height is the governing constraint, because the host reserves that vertical
   space in their own article. Targets:
     >= 700px wide   two columns, ~420px tall
     <  700px wide   controls stacked over the preview, ~560px tall
   The host can cap the content with ?h=<px>; see /js/embed.js.

   Nothing here is allowed to leak into the site: every rule is scoped to
   .embed-body, which only /embed carries.
   ========================================================================== */

/* ---------- Strip the site chrome ---------- */

/*
 * Hide the heading block. Inside a frame the host has already introduced the
 * tool in their own words, and a title at the top of a widget just eats the
 * height the host is paying for. The <h2> is kept in the DOM (clipped, not
 * display:none) so the document outline still steps h1 -> h2 -> h3; the blurb
 * is not needed at all.
 */
.embed-body .calc-head h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.embed-body .calc-head p { display: none; }
.embed-body .calc-head { margin: 0; }

/*
 * Hide the tab row. The widget is a single-purpose surface — it only ever
 * offers Resize-by-Ratio — so the two-mode switcher has nothing to switch to.
 * display:none also takes the buttons out of the tab order.
 */
.embed-body .tabs { display: none; }

/* The Dimensions panel still ships in the markup (calculator.js looks for it),
   but it carries [hidden] from the builder. Belt and braces. */
.embed-body [data-panel="dims"] { display: none; }

/*
 * The recently-used list appears only after the second calculation. A block
 * that grows after the host has already sized the frame is the one thing a
 * fixed-height iframe cannot absorb, so it stays hidden (not deleted, or
 * calculator.js would lose the elements it looks up).
 */
.embed-body .recent { display: none; }

/* ---------- Page box ---------- */

/*
 * No margin, no forced height, no horizontal scroll. The body sizes to its
 * content so that document.documentElement.scrollHeight is the true content
 * height — which is exactly the number embed.js reports to the host. (The old
 * design pinned height:100%, which made that measurement useless.)
 */
.embed-body {
  margin: 0;
  background: #ffffff;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  color: #1f2937;
}

/* ?h=<px> sets --embed-max-h; the content scrolls internally if it exceeds the
   cap. The default is high enough that the natural layout never clips. */
.embed-main {
  padding: 12px;
  max-height: var(--embed-max-h, 640px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* The card border, shadow and radius are site chrome. Inside a frame the host's
   own container draws the boundary; a border-within-a-border reads as a bug. */
.embed-body .card {
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

/* ---------- Layout: two columns, then one ---------- */

.embed-body .calc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 1rem;
  align-items: start;
}

/* No sticky preview: style.css pins it for the full site's sticky header, and
   there is no header — and no scrolling ancestor — inside a frame. */
.embed-body .calc-side { position: static; top: auto; }
.embed-body .preview-stage { height: 132px; padding: 8px; }

/*
 * Below 700px the two columns would each be too narrow for the number inputs,
 * so the preview drops under the controls instead. It is kept visible (unlike
 * the old design, which hid it) because the stacked height target already
 * accounts for it.
 */
@media (max-width: 699px) {
  .embed-body .calc-body {
    display: block;
  }
  .embed-body .calc-side { margin-top: 12px; }
  .embed-body .preview-stage { height: 120px; }
}

/* ---------- Tighten the vertical rhythm ---------- */

.embed-body .subhead { margin: 0 0 .5rem; }
.embed-body .chips { margin-bottom: .75rem; }
.embed-body .field-grid { gap: .75rem; margin-bottom: .75rem; }
.embed-body .result { margin-bottom: .5rem; }
.embed-body .result-ratio { font-size: 1.5rem; }
.embed-body .preview-caption { font-size: .75rem; }
.embed-body .note {
  margin: .5rem 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #6b7280;
}
.embed-body .copy-bar { margin-top: .75rem; }

/* ---------- Attribution ---------- */

/*
 * The one visible credit. 12px, muted, centred — legible but never competing
 * with the tool. The link keeps its default (followable) rel semantics; the
 * only attributes are target="_blank" (open on the host's page, not inside the
 * frame) and rel="noopener" (sever the opener reference). No nofollow.
 */
.embed-credit {
  /* Sits OUTSIDE .embed-main (the ?h=-capped scroll area) so it never scrolls
     out of a short frame; carries its own padding to match the 12px gutter. */
  margin: 0;
  padding: 10px 12px 12px;
  border-top: 1px solid #e5e7eb;
  font-size: 12px;
  line-height: 1.4;
  color: #6b7280;
  text-align: center;
}

.embed-credit a {
  color: #6b7280;
  font-weight: 600;
  text-decoration: none;
}

.embed-credit a:hover,
.embed-credit a:focus-visible {
  color: #2563eb;
  text-decoration: underline;
}