/* Cartogram editor.
 *
 * Everything is scoped to .ce and every id is ce-prefixed, so the tool's layout
 * cannot leak into the site and the site's cannot reach in. Colours come from
 * the host page where it has them and fall back to its own otherwise, so the
 * editor follows the site's light and dark themes without knowing about them. */

/* The site names its text colour --ink and its background --bg; both are
 * inherited where present so the editor follows the site's light and dark
 * themes, with its own values only as a fallback for a page that has neither. */
.ce {
  --ce-ink: var(--ink, #14181d);
  --ce-bg: var(--bg, #fff);
  --ce-muted: #5b636f;
  --ce-rule: #e2e6ea;
  --ce-panel: #f2f3f5;
  --ce-accent: #0072B2;
  color: var(--ce-ink);
}
@media (prefers-color-scheme: dark) {
  .ce:not([data-theme="light"] *) {
    --ce-ink: var(--ink, #e8eaed); --ce-bg: var(--bg, #16181c);
    --ce-muted: #99a3b0; --ce-rule: #2a3038; --ce-panel: #232830;
  }
}
:root[data-theme="dark"] .ce {
  --ce-ink: var(--ink, #e8eaed); --ce-bg: var(--bg, #16181c);
  --ce-muted: #99a3b0; --ce-rule: #2a3038; --ce-panel: #232830;
}
:root[data-theme="light"] .ce {
  --ce-ink: var(--ink, #14181d); --ce-bg: var(--bg, #fff);
  --ce-muted: #5b636f; --ce-rule: #e2e6ea; --ce-panel: #f2f3f5;
}

.ce * { box-sizing: border-box; }

.ce-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--ce-rule); margin-bottom: 4px;
}
.ce-hint { color: var(--ce-muted); font-size: 13px; flex: 1 1 260px; }
.ce-btn, .ce-file {
  font: inherit; font-size: 14px; padding: 6px 12px; border: 1px solid var(--ce-rule);
  border-radius: 6px; background: var(--ce-panel); color: var(--ce-ink); cursor: pointer;
  white-space: nowrap;
}
.ce-btn:hover, .ce-file:hover { border-color: var(--ce-muted); }
.ce-btn[disabled] { opacity: .45; cursor: default; }
.ce-file input { display: none; }

.ce-main { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 20px; align-items: start; }
@media (max-width: 820px) { .ce-main { grid-template-columns: minmax(0, 1fr); } }

.ce-stage svg { width: 100%; height: auto; display: block; touch-action: none; }

.ce-side { padding-top: 8px; }
@media (max-width: 820px) { .ce-side { border-top: 1px solid var(--ce-rule); } }
.ce-side h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ce-muted); margin: 0 0 8px; font-weight: 600;
}
#ce-moved { list-style: none; margin: 0 0 16px; padding: 0; font-variant-numeric: tabular-nums; }
#ce-moved li {
  display: flex; justify-content: space-between; gap: 8px; padding: 3px 0;
  border-bottom: 1px solid var(--ce-rule); font-size: 13px;
}
#ce-moved .ce-what { color: var(--ce-muted); }
#ce-empty { color: var(--ce-muted); font-size: 13px; }

.ce-cell { stroke: var(--ce-bg); stroke-width: .5; }
.ce-outline { fill: none; stroke: var(--ce-ink); stroke-width: 1.1; opacity: .75; pointer-events: none; }
.ce-state { cursor: grab; }
.ce-state.ce-dragging { cursor: grabbing; }
.ce-state.ce-sel .ce-outline { stroke: var(--ce-accent); stroke-width: 2.2; opacity: 1; }
.ce-slabel {
  font: 700 11px system-ui, sans-serif; fill: var(--ce-ink); cursor: grab;
  paint-order: stroke; stroke: var(--ce-bg); stroke-width: 3px;
}
.ce-slabel.ce-sel { fill: var(--ce-accent); stroke-width: 3px; }
.ce-clabel { font: 700 10px system-ui, sans-serif; fill: #fff; text-anchor: middle; pointer-events: none; }