/* ═══ Night City Map — Player Log & GM Planner UI ═══
   Self-contained; layered over the existing inline styles of nightcity.html. */

/* ── Mode bar (in #nav) ── */
/* Mode toggle now lives at the top of the right sidebar (the old top bar was removed). */
#nc-modebar { display:flex; gap:0; border-bottom:2px solid #111; }
.nc-mode { flex:1; font-family:var(--head, 'Eurostile', sans-serif); font-size:10px; letter-spacing:.5px; padding:7px 4px; border:none; border-right:1px solid #333; background:#111; color:#888; cursor:pointer; text-transform:uppercase; }
.nc-mode:last-child { border-right:none; }
.nc-mode.active { background:#fff; color:#111; }

/* ── Context bar (under #nav) ── */
#nc-ctxbar { display:none; align-items:center; flex-wrap:wrap; gap:8px; padding:7px 14px; background:#f3f3f3; border-bottom:2px solid #111; }
.nc-ctx-title { font-family:var(--head, sans-serif); font-size:12px; letter-spacing:2px; }
.nc-ctx-hint { font-family:var(--mono, monospace); font-size:11px; color:#666; margin-left:auto; }

/* Buttons */
.nc-btn { font-family:var(--mono, monospace); font-size:12px; padding:4px 9px; border:1px solid #111; background:#fff; color:#111; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.nc-btn:hover { background:#111; color:#fff; }
.nc-btn-sm { font-size:11px; padding:3px 7px; }
.nc-btn-cy { background:#111; color:#fff; }
.nc-btn-cy:hover { background:#333; }
.nc-btn-danger { border-color:#c0392b; color:#c0392b; }
.nc-btn-danger:hover { background:#c0392b; color:#fff; }
.nc-file { position:relative; overflow:hidden; }
.nc-file input { position:absolute; inset:0; opacity:0; cursor:pointer; font-size:0; }

/* ── GM notebook tabs ── */
.nc-gm-tabs { display:flex; align-items:stretch; gap:0; }
.nc-gm-tab { position:relative; display:flex; align-items:center; gap:6px; padding:4px 24px 4px 10px; background:#fff; border:1px solid #111; border-right:none; font-family:var(--mono, monospace); font-size:12px; color:#555; cursor:pointer; max-width:160px; }
.nc-gm-tab:last-of-type { border-right:1px solid #111; }
.nc-gm-tab.active { background:#111; color:#fff; font-weight:bold; }
.nc-gm-tab-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nc-gm-tab-close { position:absolute; right:6px; font-size:10px; opacity:.6; }
.nc-gm-tab-close:hover { opacity:1; color:#c0392b; }
.nc-gm-tab-add { display:flex; align-items:center; justify-content:center; width:30px; background:#111; color:#fff; border:1px solid #111; cursor:pointer; font-size:14px; }
.nc-gm-tab-add:hover { background:#fff; color:#111; }

/* ── Sidebar mode panel ── */
#nc-side-panel { display:none; padding:10px 12px; border-top:2px solid #111; }
.nc-side-title { font-family:var(--head, sans-serif); font-size:11px; letter-spacing:2px; margin-bottom:6px; }
.nc-side-note { font-family:var(--mono, monospace); font-size:11px; color:#666; line-height:1.5; margin-bottom:6px; }
.nc-layer-row { display:flex; align-items:center; gap:6px; font-family:var(--mono, monospace); font-size:12px; padding:3px 0; }
.nc-layer-row label { flex:1; display:flex; align-items:center; gap:6px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nc-layer-count { color:#888; font-size:11px; }
.nc-layer-rm { color:#c0392b; cursor:pointer; opacity:.6; }
.nc-layer-rm:hover { opacity:1; }

/* ── Legend augmentation ── */
#nc-legend-extra { margin-top:8px; }
.nc-legend-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:10px 0 4px; padding-bottom:3px; border-bottom:2px solid #111; font-family:var(--head, sans-serif); font-size:11px; letter-spacing:2px; }
.nc-legend-bar-gm { border-bottom-color:#888; color:#555; }
.nc-empty { font-family:var(--mono, monospace); font-size:11px; color:#999; font-style:italic; padding:4px 0; }

.nc-entry { border:1px solid #ddd; border-left:3px solid #111; padding:6px 8px; margin-bottom:5px; background:#fafafa; }
.nc-entry.nc-visited { background:#f0fff2; }
.nc-entry-head { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.nc-type-pill { color:#fff; font-family:var(--head, sans-serif); font-size:9px; letter-spacing:.5px; padding:2px 6px; border-radius:2px; text-transform:uppercase; }
.nc-entry-addr { font-family:var(--mono, monospace); font-size:12px; font-weight:bold; color:#111; }
.nc-entry-name { font-family:var(--mono, monospace); font-size:12px; color:#222; }
.nc-entry-sec { font-family:var(--mono, monospace); font-size:10px; color:#c0392b; }
.nc-entry-pub { font-family:var(--mono, monospace); font-size:9px; letter-spacing:1px; color:#fff; background:#1a7a2e; padding:1px 5px; }
.nc-entry-act-wrap { margin-left:auto; }
.nc-entry-act { font-family:var(--mono, monospace); font-size:11px; color:#2980b9; cursor:pointer; }
.nc-entry-act:hover { text-decoration:underline; }
.nc-entry-shop { font-family:var(--mono, monospace); font-size:9px; letter-spacing:1px; text-transform:uppercase; color:#111; background:#b8860b; padding:1px 6px; cursor:pointer; margin-left:6px; }
.nc-entry-shop:hover { background:#caa022; }
.nc-entry-notes { font-family:var(--mono, monospace); font-size:11px; color:#555; line-height:1.5; margin-top:4px; white-space:pre-wrap; }
.nc-thumbs { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.nc-thumb { width:46px; height:46px; object-fit:cover; border:1px solid #aaa; cursor:pointer; }
.nc-thumb-map { border-color:#2980b9; }

/* ── Entry modal ── */
.nc-modal-ov { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1000; display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:30px 12px; }
.nc-modal-card { background:#fff; width:100%; max-width:460px; border:3px solid #111; box-shadow:0 8px 30px rgba(0,0,0,.4); }
.nc-modal-head { background:#111; color:#fff; font-family:var(--head, sans-serif); font-size:14px; letter-spacing:2px; padding:9px 14px; text-transform:uppercase; }
.nc-modal-body { padding:14px; }
.nc-modal-row { font-family:var(--mono, monospace); font-size:12px; margin-bottom:10px; }
.nc-modal-grid { display:flex; gap:10px; }
.nc-modal-grid .nc-modal-lbl { flex:1; }
.nc-modal-lbl { display:block; font-family:var(--mono, monospace); font-size:11px; color:#555; margin-bottom:10px; }
.nc-modal-lbl input, .nc-modal-lbl select, .nc-modal-lbl textarea { display:block; width:100%; margin-top:3px; padding:5px 7px; border:1px solid #111; font-family:var(--mono, monospace); font-size:13px; box-sizing:border-box; }
.nc-modal-lbl textarea { resize:vertical; }
.nc-modal-check { display:flex; align-items:center; gap:7px; font-family:var(--mono, monospace); font-size:12px; margin-bottom:8px; cursor:pointer; }
.nc-modal-imgs { border-top:1px solid #ddd; padding-top:10px; margin-top:4px; }
.nc-modal-imgs-row { display:flex; gap:8px; margin-bottom:8px; }
.nc-mthumbs { display:flex; flex-wrap:wrap; gap:6px; }
.nc-mthumb { position:relative; }
.nc-mthumb img { width:60px; height:60px; object-fit:cover; border:1px solid #aaa; display:block; }
.nc-mthumb span { position:absolute; top:-6px; right:-6px; background:#c0392b; color:#fff; width:16px; height:16px; border-radius:50%; font-size:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.nc-modal-actions { display:flex; align-items:center; gap:8px; margin-top:14px; border-top:1px solid #ddd; padding-top:12px; }

/* ── Lightbox ── */
.nc-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:1100; display:flex; align-items:center; justify-content:center; cursor:zoom-out; padding:20px; }
.nc-lightbox img { max-width:95%; max-height:95%; object-fit:contain; border:2px solid #fff; }

/* ── In Player/GM mode: strip the reference content, keep map + empty legend ── */
body[data-nc-mode="player"] #loc-list,
body[data-nc-mode="gm"] #loc-list,
body[data-nc-mode="player"] #tab-map .map-legend-title,
body[data-nc-mode="gm"] #tab-map .map-legend-title,
body[data-nc-mode="player"] #dv-intro,
body[data-nc-mode="gm"] #dv-intro,
body[data-nc-mode="player"] #dv-sec,
body[data-nc-mode="gm"] #dv-sec { display:none; }

/* ── "Other" tab (district notes + contacts/personalities) ── */
#tab-other { padding:10px 0; }
.nc-other-sec { margin-bottom:16px; }
.nc-other-title { font-family:var(--head, sans-serif); font-size:12px; letter-spacing:2px; border-bottom:2px solid #111; padding-bottom:3px; margin-bottom:8px; display:flex; align-items:center; gap:10px; }
.nc-other-notes { width:100%; box-sizing:border-box; padding:7px 9px; border:1px solid #111; font-family:var(--mono, monospace); font-size:13px; resize:vertical; }
.nc-people { display:flex; flex-direction:column; gap:6px; }
.nc-person { border:1px solid #ddd; border-left:3px solid #2c3e50; padding:6px 8px; background:#fafafa; }
.nc-person-head { display:flex; align-items:center; gap:8px; }
.nc-person-name { font-family:var(--mono, monospace); font-size:13px; font-weight:bold; }
.nc-person-act { margin-left:auto; font-family:var(--mono, monospace); font-size:11px; color:#2980b9; cursor:pointer; }
.nc-person-act:hover { text-decoration:underline; }
.nc-person-rm { font-family:var(--mono, monospace); font-size:11px; color:#c0392b; cursor:pointer; opacity:.7; }
.nc-person-rm:hover { opacity:1; }
.nc-person-desc { font-family:var(--mono, monospace); font-size:11px; color:#555; line-height:1.5; margin-top:3px; white-space:pre-wrap; }

/* ── CITY view (full continuous map + clickable pin overlay + legend by type) ── */
#view-atlas { padding-top:4px; }
.nc-atlas-wrap { display:flex; gap:14px; align-items:flex-start; }
.nc-atlas-maps { flex:1; min-width:0; }
.nc-city-hint { font-family:var(--mono, monospace); font-size:11px; color:#666; margin-bottom:5px; }
.nc-city-hint.nc-city-arm { color:#c0392b; font-weight:bold; }
.nc-city-mapwrap { position:relative; line-height:0; cursor:crosshair; }
.nc-city-mapwrap:not(.nc-arming) { cursor:crosshair; }
#nc-city-img { width:100%; height:auto; display:block; }
.nc-city-pins { position:absolute; inset:0; pointer-events:none; }
.nc-pin { position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.5); cursor:pointer; pointer-events:auto; transition:transform .1s; }
.nc-pin:hover { transform:scale(1.35); z-index:5; }
.nc-pin-ro { border-style:dashed; }
/* legend (shared with city view) */
.nc-atlas-legend { width:260px; flex-shrink:0; border:1px solid #111; padding:8px 10px; max-height:78vh; overflow:auto; }
.nc-atlas-legend-title { font-family:var(--head, sans-serif); font-size:12px; letter-spacing:2px; border-bottom:2px solid #111; padding-bottom:4px; margin-bottom:8px; }
.nc-atlas-leg-group { margin-bottom:10px; }
.nc-atlas-leg-head { display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.nc-atlas-leg-count { font-family:var(--mono, monospace); font-size:10px; color:#888; }
.nc-atlas-leg-item { display:flex; align-items:baseline; gap:6px; font-family:var(--mono, monospace); font-size:11px; padding:2px 0 2px 4px; line-height:1.4; }
.nc-atlas-leg-item > span:first-child { cursor:pointer; flex:1; }
.nc-atlas-leg-item > span:first-child:hover { text-decoration:underline; }
.nc-atlas-leg-dist { font-weight:bold; color:#111; }
.nc-leg-place { color:#2980b9; cursor:pointer; font-size:10px; flex-shrink:0; }
.nc-leg-place:hover { text-decoration:underline; }
.nc-modal-pin { font-family:var(--mono, monospace); font-size:11px; color:#555; background:#f3f3f3; border:1px solid #ddd; padding:5px 8px; margin-bottom:10px; display:flex; align-items:center; gap:10px; }

@media (max-width:760px) { .nc-atlas-wrap { flex-direction:column; } .nc-atlas-legend { width:100%; } }

/* ── Custom maps & off-NC lists (Inc 3) ── */
#nc-maps-bar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; flex-shrink:0; padding:8px 12px; background:#f3f3f3; border-bottom:2px solid #111; }
.nc-mtab { font-family:var(--head,sans-serif); font-size:11px; letter-spacing:1px; padding:5px 11px; border:2px solid #111; background:#fff; color:#111; cursor:pointer; display:flex; align-items:center; gap:6px; }
.nc-mtab.active { background:#111; color:#fff; }
.nc-mtab-mv { font-size:10px; color:#888; padding:0 2px; cursor:pointer; }
.nc-mtab.active .nc-mtab-mv { color:#bbb; }
.nc-mtab-mv:hover { color:#1a7a2e; }
.nc-mtab-add { font-family:var(--mono,monospace); font-size:11px; padding:5px 9px; border:1px dashed #999; background:#fff; color:#555; cursor:pointer; }
.nc-mtab-add:hover { border-color:#111; color:#111; }
#view-custom { padding:16px; }
.nc-cm-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; border-bottom:2px solid #111; padding-bottom:8px; }
.nc-cm-name { font-family:var(--head,sans-serif); font-size:18px; letter-spacing:1px; border:1px solid #ccc; padding:4px 8px; flex:1; }
.nc-cm-title { font-family:var(--head,sans-serif); font-size:18px; letter-spacing:1px; flex:1; }
.nc-cm-stage { display:flex; gap:16px; align-items:flex-start; }
.nc-cm-imgwrap { position:relative; flex:1; min-width:0; border:2px solid #111; cursor:crosshair; background:#f8f8f8; line-height:0; }
.nc-cm-imgwrap img { width:100%; display:block; }
.nc-cm-pin { position:absolute; transform:translate(-50%,-50%); width:22px; height:22px; border-radius:50%; background:#c0392b; color:#fff; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; font-family:var(--head,sans-serif); font-size:10px; cursor:pointer; }
.nc-cm-pin.ro { background:#1a7a2e; }
.nc-cm-pin.pub { outline:2px solid #b8860b; }
.nc-cm-side { flex:0 0 280px; max-height:calc(100vh - 220px); overflow:auto; }
.nc-cm-listonly { max-width:680px; }
.nc-cm-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; border-bottom:1px solid #eee; padding:6px 0; font-size:12px; }
.nc-cm-rname { flex:1; font-family:var(--head,sans-serif); letter-spacing:.5px; }
.nc-cm-rnotes { flex-basis:100%; font-size:11px; color:#666; line-height:1.5; padding-left:26px; }
.nc-cm-ro { font-size:9px; letter-spacing:1px; color:#fff; background:#1a7a2e; padding:1px 5px; }
.nc-cm-empty { font-size:11px; color:#999; font-style:italic; padding:8px 0; }

/* Embedded in the app (gm/player): drop the reference topic label, tighten chrome */
body[data-nc-mode="gm"] #overview > div:first-child h2,
body[data-nc-mode="player"] #overview > div:first-child h2 { display:none; }

/* ════ Location popup v2 — two-pane "maps tool" ════ */
.nc-modal-card--wide { max-width:780px; }
.nc-modal-card--wide .nc-modal-body { padding:0; }
.nc-loc { display:flex; align-items:stretch; }
.nc-loc-media { width:280px; flex-shrink:0; background:#0d0d0e; padding:10px; display:flex; flex-direction:column; gap:10px; max-height:74vh; overflow:auto; }
.nc-loc-img { position:relative; margin:0; }
.nc-loc-img img { width:100%; display:block; border:1px solid #333; }
.nc-loc-img figcaption { font-family:var(--mono, monospace); font-size:9px; letter-spacing:1px; text-transform:uppercase; color:#b8860b; background:#000; padding:3px 6px; }
.nc-loc-img-map img { border-color:#b8860b; }
.nc-loc-img-x { position:absolute; top:5px; right:5px; width:20px; height:20px; line-height:20px; text-align:center; background:rgba(0,0,0,.7); color:#fff; cursor:pointer; font-size:11px; }
.nc-loc-img-x:hover { background:#c0392b; }
.nc-loc-noimg { flex:1; display:flex; align-items:center; justify-content:center; min-height:160px; border:1px dashed #333; color:#555; font-family:var(--mono, monospace); font-size:10px; letter-spacing:2px; }
.nc-loc-main { flex:1; min-width:0; padding:14px 16px; max-height:74vh; overflow:auto; }
.nc-loc-badges { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:12px; }
.nc-loc-addr { font-family:var(--mono, monospace); font-size:12px; color:#555; }
.nc-loc-badge { font-family:var(--mono, monospace); font-size:9px; letter-spacing:1px; padding:2px 6px; border:1px solid #111; color:#111; }
.nc-loc-badge-sec { background:#111; color:#fff; }
.nc-loc-badge-pub { background:#1a7a2e; color:#fff; border-color:#1a7a2e; }
.nc-loc-badge-vis { background:#eee; color:#555; border-color:#ccc; }
.nc-loc-shop { display:block; width:100%; box-sizing:border-box; font-family:var(--head, sans-serif); font-size:13px; letter-spacing:2px; text-transform:uppercase; color:#111; background:#b8860b; border:none; padding:11px; margin-bottom:14px; cursor:pointer; }
.nc-loc-shop:hover { background:#caa022; }
.nc-loc-addimgs { display:flex; gap:8px; margin-top:auto; padding-top:6px; }
@media (max-width:620px) { .nc-loc { flex-direction:column; } .nc-loc-media { width:auto; max-height:200px; } }

/* Location view-mode (read-only presentation) */
.nc-loc-notes { font-family:var(--mono, monospace); font-size:14px; line-height:1.65; color:#222; white-space:pre-wrap; margin-bottom:14px; }
.nc-loc-empty { color:#999; font-style:italic; }