/* /embed (site/embed.html): the pulse in one compact column inside a frame.
   Colours are the site's theme tokens; the theme comes from ?theme=. The
   footer line stays fixed inside the frame and the column scrolls above it. */

html, body.em-body { margin: 0; background: var(--canvas); color: var(--fg); min-height: 100%; }
body.em-body { font: 400 14px/1.4 var(--body); padding: 0; overflow-x: hidden; }
.em { display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 56px; margin: 0; max-width: none; }
.em .pl-screen { grid-row: auto; grid-column: auto; }
.em .pl-world { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.em .pl-big-marks .pl-mark { flex-basis: 44px; width: 44px; height: 44px; padding: 6px; }
.em .pl-big-marks .pl-initial, .em .pl-big-marks .pl-mark .fav.fav-mark { font-size: 20px; }
.em .pl-big-marks .pl-a { padding: 10px 14px; }
.em .pl-a { padding: 9px 12px; }
.em .pl-head { padding: 10px 12px; }

.em-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 12px; box-sizing: border-box; background: var(--canvas); border-top: 1px solid var(--line); }
.em-link { display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px/1.2 var(--body); color: var(--fg-2); text-decoration: none; }
.em-link:hover, .em-link:focus-visible { color: var(--fg); text-decoration: none; }
.em-link img { display: block; height: 16px; width: auto; }
.em .pl-top { grid-column: 1 / -1; }

/* ?cols=2: two columns of screens when the frame is wide enough; world and
   the lead video span both. Narrow frames fall back to one column. */
html[data-cols="2"] .em { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
html[data-cols="2"] .em .pl-screen[data-screen="world"] { grid-column: 1 / -1; }
@media (max-width: 560px) { html[data-cols="2"] .em { display: flex; } }