/* The world editor (src/worlds/editor-ui.mjs), laid out as the rules editor
   is (styles/rules.css): Generate's stages, the map, Assist beside a field. */
.world-editor .rs-nav button.busy small{color:var(--accent)}
.we-stages{display:flex;flex-direction:column;gap:var(--space-2);margin:0;padding:0;list-style:none}
.we-stages li{display:flex;align-items:center;gap:var(--space-5);padding:8px 10px 8px 12px;border:1px dashed var(--stone-750);border-radius:var(--radius-md);background:var(--surface-low)}
.we-stages li>div{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.we-stages b{color:var(--text-dim);font:600 var(--size-label) var(--head)}
.we-stages small{color:var(--muted);font-size:var(--size-small);overflow-wrap:anywhere}
.we-stage-mark{flex:none;width:22px;color:var(--muted);font:600 var(--size-label) var(--head);text-align:center}
.we-stages li[data-state=done]{border-style:solid;border-color:var(--stone-800)}
.we-stages li[data-state=done] .we-stage-mark{color:var(--ok)}
.we-stages li[data-state=writing]{border-style:solid;border-color:var(--accent-600);background:var(--accent-950)}
.we-stages li[data-state=writing] small,.we-stages li[data-state=writing] .we-stage-mark{color:var(--accent)}
.we-stages li[data-state=failed]{border-style:solid;border-color:var(--danger-700)}
.we-stages li[data-state=failed] small,.we-stages li[data-state=failed] .we-stage-mark{color:var(--danger-300)}
.we-stages .rs-button{flex:none;align-self:center}

.we-assist{margin-left:8px;min-height:28px;padding:0 10px;border-radius:var(--radius-pill);color:var(--accent-350);font:600 var(--size-caption) var(--head);letter-spacing:.06em;vertical-align:middle}
.we-assist:disabled{color:var(--muted)}
.world-editor .rs-field>span:not(.pick-field){display:flex;align-items:center;flex-wrap:wrap}

/* Not shrunk by the scrolling column it sits in. */
.we-map{flex:none;border:1px solid var(--stone-800);border-radius:var(--radius-md);background:var(--surface-low);overflow:hidden}
.world-editor .rs-grid.we-wide{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.we-map svg{display:block;width:100%;height:auto;max-height:min(52dvh,520px);touch-action:pan-x pan-y;user-select:none}
.we-map-region rect{fill:rgb(var(--accent-rgb) / .04);stroke:var(--stone-700);stroke-width:.6}
.we-map-region.unknown rect{stroke-dasharray:3 2;fill:none}
.we-map-region text{fill:var(--muted);font:600 5px var(--head);letter-spacing:.04em}
.we-map-place{cursor:grab;touch-action:none}
.we-map-place circle{fill:var(--accent-450);stroke:var(--surface);stroke-width:.8}
.we-map-place text{fill:var(--text-soft);font:500 4px var(--body);paint-order:stroke;stroke:var(--surface-low);stroke-width:1.2px}
.we-map-place[aria-pressed=true] circle{fill:var(--accent);r:3.6px}
.we-map-place[aria-pressed=true] text{fill:var(--accent)}
.we-map-place:focus-visible{outline:none}
.we-map-place:focus-visible circle{stroke:var(--accent-100);stroke-width:1.2}
.we-map-place:active{cursor:grabbing}

@media(max-width:760px){
  .world-editor .rs-head{flex-direction:column;align-items:flex-start}
  .we-stages li{flex-wrap:wrap}
  /* A region keeps a usable size; a wide world scrolls sideways in its box. */
  .we-map{overflow-x:auto}
  .we-map svg{width:max(100%,var(--we-map-width,0px));max-width:none;max-height:none}
  .we-map-region text{font-size:6px}
  .we-map-place text{font-size:5px}
}