/* The world map (numbers-based branch; src/ui/world-map.mjs): at the top of
   Lore → Places, the region the party is in as its painted map with its
   places pinned, the regions beside it as steps, and the picked place's card;
   Whole map opens the realm as one map to drag and zoom, the whole screen on
   a phone. The map itself is always dark, under pictures, whatever the theme;
   names on it are white over a dark shadow. Tokens from tokens.css. */
.world-map{display:grid;gap:8px;margin:0 0 16px}
.map-bar{display:flex;align-items:center;gap:6px;min-width:0}
.map-bar .lore-kicker{flex:1;min-width:0;overflow-wrap:anywhere}
.map-bar button{display:inline-flex;align-items:center;gap:5px;min-height:40px;padding:0 10px;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:var(--surface-low);color:var(--text-dim);font:500 var(--size-caption)/1.2 var(--head);white-space:nowrap}
.map-bar .map-whole{border-color:var(--accent-600);background:var(--accent-950);color:var(--accent);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.map-bar button .material-symbols-outlined{font-size:18px}

/* The region's square: its picture, or drawn where the world has none. */
.map-frame{position:relative;width:100%;aspect-ratio:1;overflow:hidden;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:#06121f}
.map-tile{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.map-drawn{position:absolute;inset:0;display:grid;place-items:start;background:radial-gradient(circle at 50% 50%,rgb(255 255 255/.05),transparent 70%),repeating-linear-gradient(0deg,rgb(255 255 255/.06) 0 1px,transparent 1px 12.5%),repeating-linear-gradient(90deg,rgb(255 255 255/.06) 0 1px,transparent 1px 12.5%),#0b1726}
.map-drawn span{padding:10px 12px;color:rgb(255 255 255/.4);font:600 var(--size-micro)/1.3 var(--head);letter-spacing:.2em;text-transform:uppercase}
.atlas-tile.map-drawn{inset:auto;border:1px solid rgb(255 255 255/.12)}

/* Pins: a button the size of a fingertip around a small mark. */
.map-pin{position:absolute;z-index:2;width:26px;height:26px;margin:-13px 0 0 -13px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.map-pin::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#e9e1c8;border:1.5px solid #1b1408;box-shadow:0 0 0 1px rgb(0 0 0/.35)}
.map-pin.is-known::before{width:6px;height:6px;margin:-3px 0 0 -3px;border-width:1px;opacity:.85}
.map-pin.is-heard::before{background:#1b1408;border:2px solid #f4d36b}
.map-pin.is-visited::before{background:var(--accent);border-color:#1b1408}
.map-pin.is-here{z-index:3}
.map-pin.is-here::before{width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--accent);border:2px solid #fff;box-shadow:0 0 0 2px var(--accent),0 0 14px 4px rgb(255 210 90/.55)}
.map-pin:hover::before,.map-pin:focus-visible::before{outline:2px solid #fff;outline-offset:2px}
.map-pin[aria-pressed="true"]::after{content:"";position:absolute;inset:2px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgb(0 0 0/.6)}
.map-label{--gap:9px;position:absolute;z-index:1;transform:translate(var(--gap),-50%);color:#fff;font:600 11px/15px var(--head);text-shadow:0 0 3px #000,0 0 3px #000,0 0 6px #000;white-space:nowrap;pointer-events:none}
.map-label.is-far{--gap:14px}
.map-label.is-left{transform:translate(calc(-100% - var(--gap)),-50%)}
.map-label.is-above{transform:translate(-50%,calc(-100% - var(--gap)))}
.map-label.is-below{transform:translate(-50%,var(--gap))}

/* The picked place. */
.map-card{display:grid;gap:6px;padding:12px 14px;border:1px solid var(--accent-600);border-radius:var(--ledger-radius,2px);background:var(--surface-raised,var(--surface))}
.map-card-where{margin:0;color:var(--muted);font:600 var(--size-micro)/1.5 var(--head);letter-spacing:.12em;text-transform:uppercase;overflow-wrap:anywhere}
.map-card h4{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0;color:var(--text);font:500 var(--size-lead)/1.2 var(--head);overflow-wrap:anywhere}
.map-status{color:var(--text-dim);font:500 var(--size-caption)/1.3 var(--head)}
.map-status.is-here,.map-status.is-visited{color:var(--accent)}
.map-card-leads{display:flex;align-items:center;gap:6px;margin:0;color:var(--accent);font:500 var(--size-caption)/1.4 var(--head);overflow-wrap:anywhere}
.map-card-leads .material-symbols-outlined{font-size:18px}
.map-card-text{margin:0;color:var(--text-soft);font:var(--size-caption)/1.5 var(--head);overflow-wrap:anywhere}
.map-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.map-card-actions button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--ledger-radius,2px)}
.map-card-actions button:not(.primary){border-color:var(--stone-700);background:var(--surface-low);color:var(--text-dim)}

/* The regions beside this one. */
.map-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.map-steps button{display:flex;align-items:center;gap:8px;min-width:0;min-height:44px;padding:0 10px;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:var(--surface-low);color:var(--text-dim);font:500 var(--size-caption)/1.25 var(--head);text-align:left;overflow-wrap:anywhere}
.map-steps b{flex:none;color:var(--accent);font:600 15px/1 var(--head)}

/* Whole map: the realm in a dialog, the whole screen on a phone. */
dialog.map-atlas{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0}
@media(min-width:801px){dialog.map-atlas{width:min(1180px,92vw);height:88vh;margin:auto}}
.atlas-card{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;border:1px solid var(--accent-600);border-radius:var(--ledger-radius,2px);background:var(--surface);overflow:hidden}
@media(max-width:800px){.atlas-card{border:0;border-radius:0}}
.atlas-head{display:flex;align-items:center;gap:8px;min-width:0;padding:calc(8px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));border-bottom:1px solid var(--line)}
.atlas-head>.material-symbols-outlined{color:var(--accent)}
.atlas-head h2{flex:1;min-width:0;margin:0;color:var(--accent);font:500 var(--size-story)/1.2 var(--head);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atlas-realm select{max-width:44vw;min-height:44px;padding:0 8px;font:500 var(--size-caption)/1.2 var(--head);border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:var(--field);color:var(--text)}
.atlas-head .icon{min-width:44px;min-height:44px}
.atlas-stage{position:relative;overflow:hidden;background:#06121f;touch-action:none;cursor:grab;user-select:none}
.atlas-stage:active{cursor:grabbing}
.atlas-stage:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.atlas-world{position:absolute;left:0;top:0;will-change:transform}
.atlas-tile{position:absolute;display:block;user-select:none;-webkit-user-drag:none}
.atlas-region{position:absolute;z-index:1;color:#fff;font:600 10px/1.2 var(--head);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 0 3px #000,0 0 6px #000;opacity:.85;pointer-events:none;white-space:nowrap}
.atlas-tools{position:absolute;right:max(10px,env(safe-area-inset-right));top:10px;z-index:4;display:grid;gap:6px}
.atlas-tools button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:var(--surface);color:var(--text);font:600 20px/1 var(--head);box-shadow:0 1px 6px rgb(0 0 0/.5)}
.atlas-tools button .material-symbols-outlined{font-size:20px}
.atlas-foot{max-height:min(40dvh,320px);overflow:auto;padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border-top:1px solid var(--line)}
.atlas-foot .map-card{border:0;padding:2px 2px 4px;background:none}
.atlas-hint{margin:0;color:var(--muted);font:var(--size-caption)/1.45 var(--head)}