/* Embed-only layout (F-022). The embed shell (EmbedLayout.kt) loads tokens/base/components/themes
   but NOT pages.css — an embedded calculator needs almost none of the full-page layout. This file
   carries the few pieces it does need: the main padding, a compact hero, the single-column
   calculator grid (copied from pages.css so embed.css is self-sufficient), and the attribution
   footer. Everything derives from design-system tokens so light/dark/auto theming is a pure swap. */

/* Let the auto-height resizer shrink the frame, not just grow it: base.css sets body{min-height:100vh}
   (so short pages fill the viewport), but inside an iframe that pins the body to the current frame
   height and documentElement.offsetHeight can never report smaller — a ratchet. min-height:0 lets the
   body track its real content height so embed-resize.js reports shrink as well as grow (F-022). */
body.embed-body {
  min-height: 0;
}

/* The embed's content wrapper. No .container (the full site's centered column) — the iframe host
   controls width; we just add breathing room inside the frame. */
.embed-main {
  padding: var(--sp-4);
}

/* Compact hero: the embed keeps the H1 (context + a11y) but drops the full page's large margin and
   the subhead paragraph, so the calculator sits near the top of the frame. */
.embed-main .hero {
  margin-bottom: var(--sp-4);
}

.embed-main .hero h1 {
  font-size: var(--text-xl);
}

/* Calculator grid — deliberately single-column here (an embed is narrow, so form and result stack),
   unlike pages.css which goes two-column on wide screens. Shares the minmax(0,1fr) rationale: a bare
   1fr track won't shrink below its content, breaking the time-card grid's inner scroll container. */
.embed-main .calc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}

/* Replicates pages.css .calc-col (embeds omit pages.css): keeps the OBBBA sunset banner clear of
   the CALCULATE button's hard shadow. */
.embed-main .calc-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Attribution footer: the mandatory "Calculator by paycheck.tools" provenance line, set small and
   quiet with a hairline top border so it reads as a credit, not a CTA. */
.embed-attribution {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-top: var(--border);
  font-size: var(--text-sm);
  color: var(--gray-600);
}

.embed-attribution a {
  color: var(--gray-600);
  text-decoration: underline;
}

.embed-attribution a:hover {
  color: var(--ink);
}