/* The embeddable map (/embed/map/, inside other sites' iframes) and its builder (/embed/). Loaded after
   base.css (and map.css on the widget). The widget fills its frame: header, map, controls, credit bar. */

/* ---- dark theme (only the widget offers one: ?theme=dark) ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1220; --s1: #111A2E; --s2: #1B263B; --s3: #111A2E; --line: #26324A; --line2: #3A4A66;
  --tx: #E5EAF2; --tx2: #A3B1C6; --tx3: #6B7A93;
  --chickadee: #E5EAF2;
  --accent: #60A5FA; --accent-hover: #93C5FD; --accent-soft: #172554; --accent-ink: #0B1220; --ring: rgba(96, 165, 250, 0.45);
  --bar: #60A5FA; --bar-low: #33415C;
  /* the GL map (flow.js palette) */
  --map-paper: #0B1220; --map-none: #1A2438; --map-zero: #141D2F; --map-res: #3A4A66; --map-other: #26324A; --map-border: #4A5B78;
}
:root[data-theme="dark"] .wm { --wm-z: #141D2F; --wm-low: #1A2438; }
:root[data-theme="dark"] .wm .l0 { fill: #1A2438; }
:root[data-theme="dark"] .wm-bd { stroke: #4A5B78; }
:root[data-theme="dark"] .wm-head { color: var(--tx); background: rgba(17, 26, 46, 0.9); box-shadow: 0 0 0 1px var(--line); }
:root[data-theme="dark"] .wm-front { background: var(--s1); }
:root[data-theme="dark"] .wm-tip { background: #111A2E; color: #E5EAF2; border-color: #26324A; }
:root[data-theme="dark"] select { background-color: var(--s1); color: var(--tx); border-color: var(--line2); }

/* ---- the widget ---- */
html:has(body.emb), body.emb { height: 100%; }
body.emb { margin: 0; overflow: hidden; background: var(--bg); color: var(--tx); font: 15px/1.4 var(--font-sans); }
.emb-wrap { display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding: 8px 12px 0; }
.emb-h { flex: none; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.emb-name { font-weight: 700; font-size: 1.05rem; color: var(--tx); text-decoration: none; letter-spacing: -0.01em; }
.emb-name:hover { text-decoration: underline; }
.emb-kind { font-size: 0.85rem; color: var(--tx2); }
.emb .wm { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.emb-fit { flex: 1 1 auto; min-height: 90px; container-type: size; display: flex; align-items: center; justify-content: center; }
.emb .wm-stage { width: 100%; width: min(100cqw, calc(100cqh * var(--ar))); max-width: none; margin: 0 auto; }
.emb .wm-ctl { flex: none; margin-top: 6px; gap: 12px; }
.emb .wm-play { height: 38px; padding: 0 14px; font-size: 0.88rem; }
.emb .wm-bars { height: 34px; }
.emb .wm-lay { flex: none; margin-top: 6px; gap: 6px 10px; }
.emb .wm-lay button { min-height: 30px; padding: 0 10px; font-size: 0.76rem; }
/* the state picker and play speed stay on the site: in a frame, click a state to zoom (or ?state=) */
.emb .wm-stsel, .emb .wm-sp { display: none; }
.emb .wm-foot { flex: none; margin-top: 6px; min-height: 0; gap: 2px 16px; }
.emb .wm-wk { font-size: clamp(1.05rem, 3.4vw, 1.45rem); }
.emb .wm-stat { font-size: 0.8rem; }
.emb .wm-note, .emb .ex-src { display: none; }   /* the widget names no data source: its Sources link does */
.emb .wm-panel { max-height: calc(100% - 16px); overflow: auto; }
.emb-credit { flex: none; margin: 6px -12px 0; padding: 5px 12px 6px; border-top: 1px solid var(--line); background: var(--s1); font-size: 11px; line-height: 1.35; color: var(--tx2); }
.emb-credit a { color: var(--tx2); }
.emb-credit { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.emb-credit .emb-by { color: var(--accent); font-weight: 600; text-decoration: none; }
.emb-credit .emb-by:hover { text-decoration: underline; }
.emb-credit .emb-by b { font-weight: 700; }
.emb-credit .emb-src { color: var(--tx3); text-decoration: none; }
.emb-credit .emb-src:hover { color: var(--tx2); text-decoration: underline; }
.emb-nojs { padding: 12px; }
/* small frames: drop the extras first, keep the map, play, timeline and week */
@media (max-width: 560px) {
  .emb .wm-ctl { flex-wrap: nowrap; gap: 8px; align-items: flex-end; }
  .emb .wm-play { width: auto; height: 38px; padding: 0 10px; }
  .emb .wm-play span { display: none; }
  .emb .wm-tl { flex-basis: auto; }
  .emb .wm-bars { height: 30px; }
  .emb .wm-leg { display: none; }
  .emb .wm-kind, .emb .wm-lay > .wm-tg:not(:first-child) { display: none; }   /* keep the map view switch */
  .emb .emb-kind { display: none; }
}
@media (max-height: 460px) {
  .emb .wm-lay, .emb .wm-leg { display: none; }
}
@media (max-height: 340px) {
  .emb .wm-stat { display: none; }
}

/* ---- the builder (/embed/) ---- */
.emb-b { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--space-4) var(--space-5); margin: var(--space-5) 0 var(--space-6); font-family: var(--font-sans); }
.emb-form { grid-row: span 2; display: flex; flex-direction: column; gap: var(--space-4); }
.emb-f { margin: 0; padding: 0; border: 0; min-width: 0; }
.emb-f > label:first-child, .emb-f legend { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 6px; padding: 0; }
.emb-f input[type="text"], .emb-f select { display: block; width: 100%; font: 1rem var(--font-sans); padding: 10px 12px; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--s1); color: var(--tx); }
fieldset.emb-f label { display: inline-flex; align-items: center; gap: 6px; margin: 0 16px 6px 0; font-size: 0.95rem; cursor: pointer; }
.emb-chk { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; cursor: pointer; }
.emb-combo { position: relative; }
#emb-sug { position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px 0; list-style: none; background: var(--s1); border: 1px solid var(--line2); border-radius: var(--radius); box-shadow: var(--sh); max-height: 300px; overflow: auto; max-width: none; }
#emb-sug li { margin: 0; padding: 8px 12px; font-size: 0.95rem; cursor: pointer; }
#emb-sug li[aria-selected="true"], #emb-sug li:hover { background: var(--accent-soft); color: var(--accent); }
.emb-out, .emb-prev { min-width: 0; }
.emb-code { display: block; width: 100%; font: 0.82rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 10px 12px; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--s2); color: var(--tx); resize: vertical; margin-top: 6px; }
.emb-act { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; }
.emb-prev-box { margin-top: 6px; padding: 12px; border: 1px dashed var(--line2); border-radius: var(--radius); background: var(--s1); overflow: auto; }
.emb-prev-box iframe { display: block; }
.emb-exs { list-style: none; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-3); }
.emb-exs li { margin: 0; }
.emb-ex { display: block; height: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--s1); text-decoration: none; color: var(--tx); font-family: var(--font-sans); }
.emb-ex:hover { border-color: var(--accent); }
.emb-ex b { display: block; color: var(--accent); margin-bottom: 4px; }
.emb-ex span { font-size: 0.9rem; color: var(--tx2); }
@media (max-width: 860px) {
  .emb-b { grid-template-columns: 1fr; }
  .emb-form { grid-row: auto; }
}