/* Embed pages: a compact calculator that fills its frame, with the source
   line held at the bottom edge. The embed hub uses the rules at the end. */
html.embed, .embed body { height: 100%; }
.embed body { background: var(--card); font-size: 15px; line-height: 1.45; }
.embed main {
  display: flex; flex-direction: column;
  max-width: none; height: 100%; margin: 0; padding: 0.8rem 1rem;
  overflow: auto; border: 1px solid var(--line); border-radius: 10px;
}
.embed h1 { font-size: 1.1rem; line-height: 1.25; margin: 0; }
.embed .field { margin: 0.55rem 0 0; }
.embed .field label { font-size: 0.72rem; margin-bottom: 0.2rem; }
.embed .field input, .embed .field select { min-height: var(--tap); padding: 0.4rem 0.6rem; }
.embed .hint { font-size: 0.75rem; color: var(--ink-faint); margin-top: 0.3rem; }
.embed-go { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 0.6rem; align-items: end; }
.embed .btn { min-height: var(--tap); padding: 0.4rem 1rem; }
.embed .readout { margin: 0.7rem 0 0.3rem; }
.embed .readout .cell { min-width: 0; flex: 1 1 6.5rem; padding: 0.5rem 0.8rem; }
.embed #results .readout .cell:last-child { flex-grow: 1.6; }
.embed .readout .v { font-size: 1.05rem; }
.embed #results p, .embed .embed-empty p { margin: 0.25rem 0; }
/* the reference strip holds the result's place until there is a result */
.embed #results:not([hidden]) + .embed-empty { display: none; }
.embed .embed-foot { margin: auto 0 0; padding-top: 0.6rem; }
/* a wide frame has room to spare, so it gets a roomier card */
@media (min-width: 520px) {
  .embed main { padding: 1.1rem 1.3rem; }
  .embed h1 { font-size: 1.3rem; }
  .embed .field { margin-top: 0.8rem; }
  .embed .readout { margin: 1rem 0 0.5rem; }
  .embed .readout .cell { padding: 0.75rem 1rem; }
  .embed .readout .v { font-size: 1.35rem; }
  .embed #results p, .embed .embed-empty p { margin: 0.4rem 0; }
}

/* hub */
.embed-preview { display: block; max-width: 640px; border: 0; margin: 1rem 0; }
.embed-code {
  display: block; width: 100%; font-family: var(--mono); font-size: 1rem; line-height: 1.45;
  padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink); resize: vertical;
}
.copy-row { margin: 0.5rem 0; }
.embed-offer .copy-error { color: var(--bad); font-size: 0.85rem; }