/* The embed page (anudina.dixith.com/embed/), on top of doc.css. 26 October 2026. */

.emb { display: grid; gap: 4px 22px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) {
  main.doc:has(.emb) { max-width: 980px; }
  .emb { grid-template-columns: minmax(0, 1fr) 440px; }
  .emb-preview { position: sticky; top: 76px; }
}
.emb-form { display: grid; gap: 14px; padding-bottom: 18px; }
.emb-form h2 { margin-bottom: 0; }
.field > label { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; font-weight: 600; font-size: 15px; }
.field > label small, legend small { color: var(--ink-2); font-weight: 400; font-size: 14px; }

/* The town search: a list under the field, each row a 44 px target. */
.emb-place { position: relative; }
.emb-list {
  list-style: none; margin: 4px 0 0; padding: 4px; max-height: 280px; overflow: auto;
  background: var(--surface); border-radius: 13px; box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1);
}
.emb-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 44px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer; line-height: 1.3;
}
.emb-list li small { color: var(--ink-2); font-size: 13px; text-align: right; }
.emb-list li[aria-selected="true"], .emb-list li:hover { background: var(--accent-soft); }
.emb-now { color: var(--ink-2); font-size: 14px; }
.emb-now b { color: var(--ink); }

/* Choices as rows of large, plain radio buttons. */
fieldset.emb-seg { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
fieldset.emb-seg legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 15px; width: 100%; }
.emb-seg label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px 8px 10px;
  border-radius: 13px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; font-size: 15px;
}
.emb-seg label:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.emb-seg input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
.emb-seg label > span { display: flex; flex-direction: column; line-height: 1.25; }
.emb-seg label small { color: var(--ink-2); font-size: 12.5px; }

.emb-preview h2 { margin-top: 18px; }
.emb-stage {
  display: flex; justify-content: center; padding: 18px 10px; border-radius: 20px;
  background: repeating-linear-gradient(45deg, var(--bg-2) 0 10px, transparent 10px 20px);
  box-shadow: inset 0 0 0 1px var(--line);
}
.emb-stage iframe { display: block; border: 0; max-width: 100%; background: transparent; }

.emb-code {
  font: 13px/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; min-height: 120px; resize: vertical;
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.emb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 10px 0 4px; }
.emb-actions .btn { min-height: 44px; }