/* Your life map (/gifts/life-map/): on top of the shared maker look
   (/gifts/globes/maker.css). The place list sits under the picker map. */

.lm .lm-mapwrap { max-width: none; }
.lm .lm-mapwrap .wm-map { aspect-ratio: 4 / 3; cursor: crosshair; }
.lm .lm-label { display: block; font-size: 0.8rem; color: var(--muted); margin: 14px 0 6px; }
.lm .wm-seg button .bx { vertical-align: -2px; margin-right: 2px; }

/* map pins */
.lm-pin {
    width: 24px; height: 24px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
    background: var(--gold, #d9b14a); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.85);
    display: grid; place-items: center; cursor: grab;
}
.lm-pin span { transform: rotate(45deg); font: 700 11px/1 'Schibsted Grotesk', system-ui, sans-serif; color: #1d1a10; }
.lm-pin.is-on { background: #2fa596; }
.lm-pin.is-on span { color: #fff; }

/* the places */
.lm-places { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lm-place { background: var(--field); border-radius: 10px; padding: 8px 9px 9px; box-shadow: inset 0 0 0 1.5px transparent; }
.lm-place.is-on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.lm-place-top { display: grid; grid-template-columns: 22px minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.lm-num {
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    background: var(--gold); color: #1d1a10; font-size: 0.74rem; font-weight: 700;
}
.lm-place input[type="text"] {
    width: 100%; min-width: 0; background: #141716; color: var(--ink); border: 1px solid transparent; border-radius: 7px;
    padding: 6px 8px; font: inherit; font-size: 0.86rem;
}
.lm-place input[type="text"]:focus { outline: none; border-color: var(--accent); }
.lm-tools { display: flex; gap: 2px; }
.lm-tools button, .lm-icons button {
    width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--muted);
    display: grid; place-items: center; cursor: pointer; padding: 0; font-size: 1.05rem;
}
.lm-tools button:hover:not(:disabled), .lm-icons button:hover { color: var(--ink); background: #262b29; }
.lm-tools button:disabled { opacity: 0.3; cursor: default; }
.lm-place-bot { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.lm-icons { display: flex; gap: 1px; }
.lm-icons button { width: 26px; height: 26px; }
.lm-icons button[aria-pressed="true"] { background: var(--ink); color: #141716; }
.lm-icons svg { width: 16px; height: 16px; fill: currentColor; }
.lm-icons .lm-noicon { font-size: 0.7rem; font-weight: 600; }
.lm-radius { flex: 1; min-width: 150px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; font-size: 0.76rem; color: var(--muted); }
.lm-radius input { width: 100%; accent-color: var(--gold); }
.lm-where { grid-column: 2 / -1; font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.lm-status { font-size: 0.72rem; color: var(--muted); }
.lm-status.is-bad { color: #ff9b8a; }

.lm .wm-bands li span { color: var(--muted); }
.lm .wm-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 560px) {
    .lm-place-top { grid-template-columns: 22px minmax(0, 1fr) auto; }
    .lm-place-top .lm-date { grid-column: 2 / 3; }
    .lm-place-top .lm-tools { grid-row: 1; grid-column: 3; }
    .lm .wm-colors { grid-template-columns: minmax(0, 1fr); }
}