/* NLC shared popup (DESIGN_RULES.md: "one modal component").
   Fixed size per popup: the card never changes size between steps; long content scrolls inside .nlc-modal-body.
   Fits a 390x844 phone: the card is never wider/taller than the screen minus 16px each side.
   Size per popup with --nlc-modal-w / --nlc-modal-h on the .nlc-modal element. */
.nlc-modal-overlay { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0,0,0,.75); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.nlc-modal-overlay.open { display: flex; }
.nlc-modal { box-sizing: border-box; width: min(var(--nlc-modal-w, 520px), 100%); height: min(var(--nlc-modal-h, 460px), 100%);
  display: flex; flex-direction: column; overflow: hidden; border-radius: 14px;
  background: #0c1628; border: 1px solid rgba(56,189,248,.28); color: #e2e8f0; font-size: 15px; line-height: 1.55;
  font-family: inherit; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.nlc-modal-hdr { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 18px; border-bottom: 1px solid rgba(56,189,248,.18); flex-shrink: 0; }
.nlc-modal-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; }
.nlc-modal-x { min-width: 44px; min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: #a8b3c7;
  font-size: 20px; line-height: 1; cursor: pointer; }
.nlc-modal-x:hover, .nlc-modal-x:focus-visible { color: #fff; background: rgba(255,255,255,.06); }
.nlc-modal-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px; }
.nlc-modal-ftr { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid rgba(56,189,248,.18); flex-shrink: 0; flex-wrap: wrap; }
.nlc-modal-ftr .nlc-spacer { flex: 1; }
.nlc-modal-btn { min-height: 44px; min-width: 44px; padding: 10px 16px; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  border: 1px solid rgba(56,189,248,.35); background: transparent; color: #cbd5e1; }
.nlc-modal-btn.primary { background: #0284c7; border-color: #0284c7; color: #fff; }
.nlc-modal-btn.primary:hover { background: #38bdf8; color: #00121f; }
.nlc-modal-btn[hidden] { display: none; }
.nlc-modal-step { font-size: max(13px,var(--fs-min,12px)); color: #a8b3c7; }
@media (max-width: 420px) { .nlc-modal-ftr { padding: 8px 10px; gap: 6px; } .nlc-modal-btn { padding: 10px 12px; } }
@media (prefers-reduced-motion: reduce) { .nlc-modal-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* Bottom-anchored variant (city tour: leaves the highlighted map pin visible). */
.nlc-modal-overlay.nlc-bottom { align-items: flex-end; padding-bottom: 40px; background: rgba(5,8,14,.25); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Toast (geraldGreet): small, dismissible, never over the bottom-left sound/listen buttons. */
.nlc-toast { position: fixed; right: 16px; bottom: 16px; z-index: 990; width: min(320px, calc(100vw - 32px)); display: flex; gap: 8px; align-items: flex-start;
  background: #141c2e; border: 1px solid rgba(167,139,250,.45); border-radius: 12px; padding: 10px 6px 10px 14px; color: #cbd5e1;
  font-size: 15px; line-height: 1.5; box-shadow: 0 8px 24px rgba(0,0,0,.45); opacity: 0; transition: opacity .4s; }
.nlc-toast.show { opacity: 1; }
.nlc-toast-body { flex: 1; min-width: 0; }
.nlc-toast-title { font-weight: 700; color: #facc15; margin-bottom: 2px; }
.nlc-toast .nlc-modal-x { flex-shrink: 0; }
@media (max-width: 600px) { .nlc-toast { left: 12px; right: 12px; width: auto; bottom: 64px; } }
@media (prefers-reduced-motion: reduce) { .nlc-toast { transition: none; } }