/* ── Note Composer ─────────────────────────────────────────────────────────
   A note-shaped composer: the card mirrors the posted note (media on top,
   author header, body text, place footer) but every section is a field. The
   pin stays fixed on screen while the map is dragged underneath it, so the
   map does the placing, not the pin.

   Used logged-out on the preview map today; the same component is meant to
   become the default new/edit note interface, so nothing here assumes the
   guest page — see note-composer.js for the mode/adapter seams. */

.nc-root { position: fixed; inset: 0; z-index: 3000; pointer-events: none;
           font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.nc-root * { box-sizing: border-box; }
.nc-root.nc-hidden { display: none; }

/* ── Centre pin — fixed on screen, map moves under it ── */
.nc-pin { position: absolute; transform: translate(-50%, -100%); pointer-events: none;
          transition: transform .12s ease-out; will-change: transform; }
.nc-pin-bubble { width: 46px; height: 46px; border-radius: 50%; background: #10b981;
                 border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.28);
                 display: flex; align-items: center; justify-content: center;
                 font-size: 23px; line-height: 1; }
/* Flex centres the glyph's line box, not its ink — emoji sit high in that box.
   --emoji-dy is the per-device correction measured by static/emoji-metrics.js. */
.nc-pin-bubble > span { display: block; transform: translateY(var(--emoji-dy, 0.04em)); }
.nc-pin-stem { width: 2px; height: 14px; margin: 0 auto; background: rgba(0,0,0,.28); }
.nc-pin-dot  { width: 10px; height: 10px; border-radius: 50%; margin: -1px auto 0;
               background: rgba(0,0,0,.22); }
.nc-root.nc-dragging .nc-pin { transform: translate(-50%, -110%); }

/* ── Place search (top) ── */
.nc-search { position: absolute; top: 66px; left: 50%; transform: translateX(-50%);
             width: min(560px, calc(100vw - 24px)); pointer-events: auto; }
.nc-search-row { display: flex; align-items: center; gap: 8px; background: #fff;
                 border-radius: 26px; padding: 6px 6px 6px 14px;
                 box-shadow: 0 4px 20px rgba(0,0,0,.16); }
.nc-search-row input { flex: 1; min-width: 0; border: none; outline: none;
                       font-size: 14px; color: #111; background: none; padding: 8px 0; }
.nc-search-x { border: none; background: #f3f4f6; color: #6b7280; width: 32px; height: 32px;
               border-radius: 50%; font-size: 15px; cursor: pointer; flex-shrink: 0; }
.nc-search-results { margin-top: 6px; background: #fff; border-radius: 14px; overflow: hidden;
                     box-shadow: 0 8px 26px rgba(0,0,0,.18); max-height: 44vh; overflow-y: auto; }
.nc-search-results:empty { display: none; }
.nc-sr-item { padding: 11px 14px; font-size: 13px; color: #374151; cursor: pointer;
              border-bottom: 1px solid #f3f4f6; }
.nc-sr-item:last-child { border-bottom: none; }
.nc-sr-item:hover { background: #f5f7ff; }
.nc-sr-name { font-weight: 600; color: #111; }
.nc-sr-sub  { font-size: 11.5px; color: #9ca3af; margin-top: 1px; }

/* ── The card ── */
/* Height is the user's to set: drag the grip to resize, tap it to toggle between
   a compact card (more map to place on) and the full form. */
.nc-card { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
           width: min(560px, 100vw); height: var(--nc-card-h, 62vh); max-height: 90vh;
           overflow-y: auto;
           -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
           background: #fff; border-radius: 20px 20px 0 0; pointer-events: auto;
           box-shadow: 0 -8px 40px rgba(0,0,0,.24);
           transition: height .22s cubic-bezier(0.4,0,0.2,1);
           padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.nc-root.nc-resizing .nc-card { transition: none; }
.nc-root.nc-compact .nc-media { display: none; }
/* The grip is a real handle — a full-width grab strip around the visible pill */
.nc-grip { width: 100%; height: 22px; display: flex; align-items: center; justify-content: center;
           cursor: grab; touch-action: none; flex-shrink: 0; position: sticky; top: 0;
           background: #fff; z-index: 2; }
.nc-root.nc-resizing .nc-grip { cursor: grabbing; }
.nc-grip::before { content: ''; display: block; width: 40px; height: 4px;
                   border-radius: 2px; background: #e5e7eb; transition: background .15s; }
.nc-grip:hover::before { background: #cbd5e1; }

/* Media strip */
.nc-media { display: flex; gap: 8px; padding: 10px 14px 2px; overflow-x: auto; }
.nc-media-add { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 12px;
                border: 1.5px dashed #d1d5db; background: #fafbff; color: #6b7280;
                font-size: 11px; font-weight: 600; cursor: pointer; display: flex;
                flex-direction: column; align-items: center; justify-content: center; gap: 4px;
                text-align: center; padding: 6px; line-height: 1.25; }
.nc-media-add span { font-size: 20px; }
.nc-media-add.nc-locked { cursor: pointer; background: #f9fafb; color: #9ca3af; }
.nc-thumb { position: relative; flex: 0 0 auto; width: 84px; height: 84px; border-radius: 12px;
            overflow: hidden; background: #eef2ff; }
.nc-thumb img, .nc-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.nc-thumb-x { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
              border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
              font-size: 12px; line-height: 1; cursor: pointer; }
.nc-thumb-prog { position: absolute; inset: 0; background: rgba(255,255,255,.7);
                 display: flex; align-items: center; justify-content: center;
                 font-size: 11px; font-weight: 700; color: #4f46e5; }

/* Author header */
.nc-hdr { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px 6px; }
.nc-avatar { width: 34px; height: 34px; border-radius: 50%; background: #e0e7ff; color: #4338ca;
             display: flex; align-items: center; justify-content: center; font-size: 15px;
             font-weight: 700; flex-shrink: 0; overflow: hidden; }
.nc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nc-hdr-main { flex: 1; min-width: 0; }
.nc-name-row { display: flex; align-items: center; gap: 6px; }
.nc-name { flex: 1; min-width: 0; border: none; border-bottom: 1.5px dashed #d1d5db;
           outline: none; font-size: 14.5px; font-weight: 700; color: #1f2937;
           padding: 2px 0; background: none; }
.nc-name:focus { border-bottom-color: #667eea; }
.nc-name::placeholder { color: #9ca3af; font-weight: 600; }
.nc-privacy { flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: #047857;
              background: #d1fae5; border: none; border-radius: 20px; padding: 3px 9px; }
.nc-id-line { font-size: 11.5px; color: #9ca3af; margin-top: 3px; min-height: 15px; }
.nc-id-line.nc-id-warn { color: #b45309; }
.nc-id-line.nc-id-ok   { color: #047857; }

/* Auth fields (appear once a username is typed) */
.nc-auth { display: none; padding: 0 14px 4px; }
.nc-auth.nc-on { display: block; }
.nc-auth input { width: 100%; padding: 9px 12px; margin-top: 6px; font-size: 13px;
                 border: 1.5px solid #e5e7eb; border-radius: 10px; outline: none; }
.nc-auth input:focus { border-color: #667eea; }
.nc-auth-err { font-size: 12px; color: #dc2626; margin-top: 6px; display: none; }
.nc-auth-err.nc-on { display: block; }

/* Body */
.nc-body { padding: 2px 14px 6px; }
.nc-text { width: 100%; min-height: 76px; border: none; outline: none; resize: none;
           font-size: 15px; line-height: 1.5; color: #1f2937; font-family: inherit;
           background: none; }
.nc-text::placeholder { color: #b6bcc7; }
.nc-count { text-align: right; font-size: 10.5px; color: #b6bcc7; }

/* Marker style row */
.nc-style { display: flex; align-items: center; gap: 6px; padding: 4px 14px 8px; flex-wrap: wrap; }
.nc-emoji-btn { width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid #e5e7eb;
                background: #fff; font-size: 17px; cursor: pointer; flex-shrink: 0; }
.nc-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff;
             box-shadow: 0 0 0 1.5px #e5e7eb; cursor: pointer; padding: 0; }
.nc-swatch.nc-sel { box-shadow: 0 0 0 2px #667eea; transform: scale(1.12); }
.nc-emoji-grid { display: none; grid-template-columns: repeat(8, 1fr); gap: 4px;
                 padding: 8px 14px 10px; }
.nc-emoji-grid.nc-on { display: grid; }
.nc-emoji-grid button { border: none; background: #f9fafb; border-radius: 8px; padding: 6px 0;
                        font-size: 18px; cursor: pointer; }
.nc-emoji-grid button:hover { background: #eef2ff; }

/* Place footer */
.nc-foot { display: flex; align-items: center; gap: 8px; padding: 9px 14px;
           border-top: 1px solid #f3f4f6; font-size: 12px; color: #6b7280; }
.nc-foot-addr { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; }
.nc-foot-btn { flex-shrink: 0; border: 1.5px solid #e0e7ff; background: #f5f7ff; color: #4f46e5;
               border-radius: 20px; padding: 5px 11px; font-size: 11.5px; font-weight: 700;
               cursor: pointer; }

/* Actions — sticky so Post stays reachable however tall the card's fields grow */
.nc-actions { display: flex; gap: 8px; padding: 8px 14px 10px; position: sticky; bottom: 0;
              background: #fff; box-shadow: 0 -6px 12px -8px rgba(0,0,0,.25); }
.nc-btn { flex: 1; padding: 12px; border: none; border-radius: 14px; font-size: 14px;
          font-weight: 700; cursor: pointer; font-family: inherit; }
.nc-btn-cancel { flex: 0 0 auto; background: #f3f4f6; color: #4b5563; padding: 12px 18px; }
.nc-btn-post { background: linear-gradient(135deg,#667eea,#764ba2); color: #fff;
               box-shadow: 0 4px 14px rgba(102,126,234,.4); }
.nc-btn-post:disabled { opacity: .55; cursor: default; box-shadow: none; }
.nc-err { display: none; padding: 0 14px 8px; font-size: 12.5px; color: #dc2626; }
.nc-err.nc-on { display: block; }

/* Loops (🔄) — promised inline, then reported after the payout */
.nc-loops { color: #0f766e; font-weight: 800; white-space: nowrap; }
.nc-loops-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                margin: 8px 14px 0; padding: 9px 12px; border-radius: 12px;
                background: #f0fdfa; border: 1.5px solid #99f6e4;
                font-size: 12.5px; font-weight: 700; color: #0f766e; }
.nc-loops-bal { margin-left: auto; font-weight: 600; color: #14b8a6; font-size: 11.5px; }
.nc-loops-row.nc-loops-miss { background: #fffbeb; border-color: #fde68a; color: #92400e;
                              font-weight: 600; line-height: 1.45; }
.nc-loops-row.nc-loops-miss .nc-loops { color: #92400e; }

/* ── Posted state — the fields firm up into the final post ── */
.nc-card.nc-posted .nc-name,
.nc-card.nc-posted .nc-text { border: none; pointer-events: none; }
.nc-posted-banner { display: flex; align-items: center; gap: 7px; padding: 10px 14px;
                    background: #ecfdf5; color: #047857; font-size: 12.5px; font-weight: 700;
                    border-bottom: 1px solid #d1fae5; }
.nc-posted-note { padding: 12px 14px 4px; }
.nc-posted-hdr { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.nc-posted-name { font-size: 14px; font-weight: 700; color: #1f2937; }
.nc-posted-text { font-size: 15px; line-height: 1.5; color: #1f2937; white-space: pre-wrap;
                  word-break: break-word; }
.nc-posted-foot { font-size: 11.5px; color: #9ca3af; padding: 8px 14px 0; }
.nc-posted-media { display: flex; gap: 8px; padding: 0 14px 10px; overflow-x: auto; }
.nc-posted-media img { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; }

@media (max-width: 480px) {
    .nc-card { max-height: 58vh; }
    .nc-search { top: 62px; }
}