/* ============================================================================
   ATOMIC LAB — EMBEDS
   ----------------------------------------------------------------------------
   Styles for the two frame pages (embed/element, embed/table), which load only
   fonts.css, tokens.css and this file, and for the embed hub page.
   ========================================================================== */

/* ---- Frame pages: shared ------------------------------------------------ */
.emb {
  margin: 0;
  background: var(--vac-1);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
}
.emb *, .emb *::before, .emb *::after { box-sizing: border-box; }
.emb a { color: inherit; }
.emb a:focus-visible { outline: 2px solid var(--beam); outline-offset: 2px; }
.emb .mono { font-family: var(--font-mono); }
.emb-brand { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; font-size: 0.8rem; }
.emb-brand a { text-decoration: none; }
.emb-brand b { color: var(--beam); }

/* ---- Element card -------------------------------------------------------- */
.emb-card { padding: 16px; max-width: 420px; }
.emb-card__head { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.emb-tile {
  position: relative; flex: none; width: 104px; height: 104px; border-radius: 14px;
  border: 2px solid var(--fam);
  background: linear-gradient(160deg, color-mix(in srgb, var(--fam) 22%, transparent), var(--panel-solid) 65%);
}
.emb-tile__z { position: absolute; left: 10px; top: 7px; font-size: 0.85rem; color: var(--fam); }
.emb-tile__s { position: absolute; left: 10px; top: 26px; font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 1; }
.emb-tile__m { position: absolute; left: 10px; bottom: 7px; font-size: 0.75rem; color: var(--ink-2); }
.emb-card__id { display: flex; flex-direction: column; gap: 4px; }
.emb-card__name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; }
.emb-card__fam { color: var(--fam); font-size: 0.9rem; }
.emb-card__sig { margin: 12px 0 0; color: var(--ink-2); font-size: 0.9rem; }
.emb-props { margin: 12px 0 0; display: grid; gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: 10px; overflow: hidden; }
.emb-props div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; background: var(--vac-1); }
.emb-props dt { color: var(--ink-2); font-size: 0.85rem; }
.emb-props dd { margin: 0; text-align: end; font-size: 0.85rem; }
.emb-card__more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; min-height: 36px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--fam); text-decoration: none; font-weight: 600; font-size: 0.9rem;
}
.emb-card .emb-brand { margin-top: 12px; }

/* ---- Compact table --------------------------------------------------------
   18 columns sized from the iframe width (1vw is 1% of the frame), row 8 left
   empty as the gap above the f-block, as on the site's own table. */
.emb--table main { padding: 1.2vw; }
.emb-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(18, 1fr); grid-template-rows: repeat(7, auto) 1.2vw repeat(2, auto);
  gap: 0.35vw;
}
.emb-grid li { min-width: 0; }
.emb-grid a {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  aspect-ratio: 1 / 1; border-radius: 0.5vw; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--fam) 55%, transparent);
  background: color-mix(in srgb, var(--fam) 16%, var(--vac-2));
}
.emb-grid a:hover, .emb-grid a:focus-visible { background: color-mix(in srgb, var(--fam) 34%, var(--vac-2)); }
.emb-grid__z { font-family: var(--font-mono); font-size: max(7px, 0.8vw); color: var(--ink-2); line-height: 1; }
.emb-grid__s { font-family: var(--font-display); font-weight: 700; font-size: max(9px, 1.9vw); line-height: 1.1; }
.emb-legend { list-style: none; margin: 1.6vw 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: max(11px, 1.15vw); color: var(--ink-2); }
.emb-legend li::before { content: ''; display: inline-block; width: 0.8em; height: 0.8em; margin-inline-end: 0.4em; border-radius: 3px; background: var(--fam); vertical-align: -0.05em; }
.emb-foot { margin: 1.4vw 0 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: max(12px, 1.2vw); }
.emb-foot > a { font-weight: 600; min-height: 28px; display: inline-flex; align-items: center; }

/* ---- Hub page ------------------------------------------------------------ */
.emb-hub > * { max-width: 980px; }
.emb-hub__h { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 0.5rem; }
.emb-hub p { color: var(--ink-2); max-width: 70ch; }
.emb-hub__preview { margin: 1rem 0; border: 1px solid var(--edge); border-radius: 14px; overflow: hidden; background: var(--vac-1); }
.emb-hub__preview iframe { display: block; width: 100%; border: 0; }
.emb-hub__preview--table iframe { height: auto; aspect-ratio: 8 / 5; min-height: 330px; }
.emb-hub__preview--card { max-width: 380px; }
.emb-hub__preview--card iframe { height: 600px; }
.emb-hub__label { display: block; margin: 0.75rem 0 0.35rem; font-size: 0.85rem; color: var(--ink-2); }
.emb-hub__code { width: 100%; resize: vertical; font-size: 0.8rem; }
.emb-hub__pick select { max-width: 100%; }
.emb-hub__actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.6rem; flex-wrap: wrap; }
.emb-hub__status { font-size: 0.8rem; color: var(--ink-2); }