/* The embed page: the choices on the left, the frame and its code on the right; on a phone one
   column with the copy button kept in view at the bottom. */
.embed-builder{
max-width:1320px}
.embed-builder__intro{
max-width:640px}
.embed-builder__grid{
display:grid;
grid-template-columns:minmax(0,380px) minmax(0,1fr);
gap:32px;
align-items:start;
margin-top:24px}
.embed-builder__choices{
display:grid;
gap:16px}
.embed-builder__label{
display:block;
margin:0 0 6px;
padding:0;
color:#ffda63;
font:11px var(--font-mono);
letter-spacing:1px;
text-transform:uppercase}
.embed-builder__field{
position:relative;
display:grid}
.embed-builder__field input{
box-sizing:border-box;
width:100%;
max-width:none;
min-height:40px;
padding:8px;
border:1px solid #fff;
border-radius:3px;
background:#000;
color:var(--text);
font:14px var(--font-text)}
.embed-builder__field input:focus-visible{
outline:2px solid #ffcf52;
outline-offset:1px}
.embed-builder__field .city-results{
top:100%;
width:100%;
max-height:320px}
.embed-builder__field--time input{
width:130px}
.embed-builder__field--time input::-webkit-calendar-picker-indicator{
filter:invert(1) brightness(1.6);
opacity:.7}
.embed-builder__kinds,.embed-builder__tabs{
margin:0;
padding:0;
border:0;
min-width:0}
.embed-builder__kinds{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px}
.embed-builder__kinds legend,.embed-builder__tabs legend{
grid-column:1/-1}
.embed-builder__kind{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr);
justify-items:center;
gap:6px;
padding:10px 6px;
border:1px solid #fff;
border-radius:3px;
background:#000;
color:var(--text);
font:13px/1.3 var(--font-text);
text-align:center;
cursor:pointer}
/* The radio itself is hidden; the whole card is the choice, with a gold edge when chosen. */
.embed-builder__kind input{
position:absolute;
opacity:0;
pointer-events:none}
.embed-builder__kind:has(input:checked){
border-color:#ffcf52;
box-shadow:0 0 0 1px #ffcf52;
color:#ffda63}
.embed-builder__kind:has(input:focus-visible){
outline:2px solid #ffcf52;
outline-offset:2px}
/* On a narrow card the icon gives way, so it keeps within the card and centred. */
.embed-builder__icon{
position:relative;
display:grid;
place-items:center;
width:min(64px,100%);
height:48px;
border-radius:3px;
background:#0b2236}
/* The globe from scripts/build-embed-globes.mjs: drawn once, shown on both globe cards. The
   city dots appear as soon as Cities on the globe is ticked. */
.embed-builder__globe-defs{
position:absolute;
width:0;
height:0;
overflow:hidden}
.embed-builder__globe{
width:min(44px,100%);
height:auto;
aspect-ratio:1}
#embed-globe .ocean{
fill:url(#embed-globe-light)}
#embed-globe .land{
fill:#7fb46a}
#embed-globe .grid{
fill:none;
stroke:#cde9ed;
stroke-opacity:.22;
stroke-width:3}
#embed-globe .rim{
fill:none;
stroke:#cde9ed;
stroke-opacity:.6;
stroke-width:6}
#embed-globe-dots circle{
fill:#fff;
stroke:#02101e;
stroke-width:4}
.embed-builder__globe-cities{
visibility:hidden}
.embed-builder__choices:has(#embed-globe-cities input:checked) .embed-builder__globe-cities{
visibility:visible}
.embed-builder__icon--point::after{
content:'';
position:absolute;
left:6px;
right:6px;
bottom:6px;
height:12px;
border-top:2px solid #ffda63;
border-radius:50% 50% 0 0}
.embed-builder__tabs{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:6px}
.embed-builder__tabs[hidden]{
display:none}
.embed-builder__check{
display:flex;
align-items:center;
gap:8px;
min-height:38px;
padding:6px 10px;
border:1px solid #fff;
border-radius:3px;
background:#000;
color:var(--text);
font:13px var(--font-text);
cursor:pointer}
.embed-builder__check[hidden]{
display:none}
.embed-builder__check input{
width:18px;
height:18px;
margin:0;
flex:none;
accent-color:#efbe3d}
.embed-builder__check input:disabled{
cursor:not-allowed}
.embed-builder__hint{
margin:-8px 0 0;
color:#b9d7db;
font:11px var(--font-mono)}
.embed-builder__result{
padding:16px;
border:1px solid #ffffff55;
border-radius:3px}
.embed-builder__result h2{
display:flex;
gap:8px}
.embed-builder__result h2 small{
margin-left:auto;
color:#b9d7db;
font:inherit;
text-transform:none}
/* The frame keeps its real size and is scaled down to the width when that is smaller
   (fitPreview() in src/embed-page.js); the slot takes the scaled height. */
.embed-builder__preview{
position:relative;
overflow:hidden;
max-width:100%}
.embed-builder__preview iframe{
display:block;
border:0;
transform-origin:0 0}
.embed-builder__code{
display:grid;
margin-top:14px}
.embed-builder__code textarea{
box-sizing:border-box;
width:100%;
min-height:84px;
padding:8px;
border:1px solid #fff;
border-radius:3px;
background:#000;
color:var(--text);
font:12px/1.5 var(--font-mono);
resize:vertical;
word-break:break-all}
.embed-builder__copy{
margin-top:10px}
.embed-builder__copy .embed-copy{
width:100%}
.embed-builder__status{
min-height:16px;
margin:6px 0 0;
color:#b8fff5;
font:11px var(--font-mono);
letter-spacing:.8px}
@media(max-width:860px){
.embed-builder__grid{
grid-template-columns:minmax(0,1fr);
gap:24px}
.embed-builder__result{
padding:10px}
/* The copy button stays in view at the bottom while scrolling through the choices; the page
   keeps room for it at the end. */
.embed-builder{
padding-bottom:76px}
.embed-builder__copy{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:5;
margin:0;
padding:8px 16px calc(12px + env(safe-area-inset-bottom));
background:#03101d;
border-top:1px solid #ffffff33}
}