.map-wrap { flex: 1; min-width: 0; position: relative; }
.map-wrap svg { width: 100%; height: 100%; display: block; }
.pt { stroke: var(--bg); stroke-width: 2; }
.pt-label { font-size: 18px; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.pt-label.identity { font-weight: 700; font-size: 22px; }
.side { width: 30%; display: flex; flex-direction: column; gap: 1rem; min-width: 14rem; }
.legend { display: flex; flex-direction: column; gap: .35rem; font-size: .8rem; color: var(--ink-2); }
.legend span::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 50%;
                        background: var(--c); margin-right: .5em; vertical-align: middle; }
.nn-title { font-size: .95rem; font-weight: 700; }
.nn-list { display: grid; gap: .3rem; font-size: .85rem; }
.nn-row { display: grid; grid-template-columns: 8.5em 1fr 2.6em; align-items: center; gap: .5rem; }
.nn-row .track { height: .55em; background: var(--grid); border-radius: 4px; overflow: hidden; }
.nn-row .fill { height: 100%; background: var(--s1); border-radius: 0 4px 4px 0; }
.nn-row .v { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: .75rem; }
.nn-row.compare span:first-child { color: var(--ink); }
.nn-row.compare .fill { background: var(--ink); }
/* target view for good/bad words */
.target .ring { fill: none; stroke: var(--line); stroke-width: 2.5; }
.target .ring-label { font-size: 15px; fill: var(--ink-2); }
.target .centre circle { fill: var(--s2); }
.target .centre text { font-size: 30px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 5px; }
.target .flyer circle { fill: var(--s1); stroke: var(--bg); stroke-width: 2; }
.target .flyer text { font-size: 22px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 5px; }
.target .flyer.compare circle { fill: var(--ink); }
.target .flyer.compare text { fill: var(--ink); font-style: normal; font-weight: 700; }
.target .spoke { stroke: var(--s1); stroke-width: 2.5; opacity: .7; }
.target .spoke.compare { stroke: var(--ink); stroke-dasharray: 6 6; }
/* compact side panel */
.side .legend { flex-direction: row; flex-wrap: wrap; gap: .2rem 1rem; font-size: .7rem; }
.side .nn-list { gap: .15rem; font-size: .8rem; }
.pt-label.compare { fill: var(--ink-2); font-style: italic; }
.side.target-mode .legend { display: none; }
.map-wrap.with-stages { display: flex; flex-direction: column; gap: 1vh; }
.map-wrap.with-stages svg { flex: 1; min-height: 0; }
.pt-label.star { font-size: 22px; font-weight: 700; fill: var(--ink); }
.pt-label.identity.star { fill: var(--s1); }
/* she <-> he line */
.target .axis-line { stroke: var(--ink-2); stroke-width: 3; }
.target .axis-mid { stroke: var(--ink-2); stroke-width: 3; }
.target .axis-end { font-size: 40px; font-weight: 700; }
.target .axis-end.she, .target .axis-dot.she { fill: var(--s2); }
.target .axis-end.he, .target .axis-dot.he { fill: var(--s1); }
.target .axis-dot { stroke: var(--bg); stroke-width: 2; }
.target .axis-lead { stroke: var(--line); stroke-width: 1.5; }
.target .axis-word { font-size: 21px; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.target .small .flyer text { font-size: 23px; }
.target .small .centre text { font-size: 32px; }
.pt-label.landmark { font-size: 22px; fill: var(--ink); font-weight: 700; }
.pt-label.compare.star { font-style: normal; fill: var(--ink); }
/* she <-> he: words lit up in the extra step */
.target .axis-word.hl { font-weight: 700; }
.target .axis-word.hl.she, .target .axis-dot.hl.she { fill: var(--s2); }
.target .axis-word.hl.he, .target .axis-dot.hl.he { fill: var(--s1); }
.target .axis-lead.hl.she { stroke: var(--s2); }
.target .axis-lead.hl.he { stroke: var(--s1); }
.target .axis-dot.hl { stroke: var(--bg); stroke-width: 4; }