/* Tonka Explorer v2 — css/edits.css (owner: edits agent)
   Editor fields in the bottom sheet (DESIGN §5.8 field styles, 16 px inputs so iOS does not zoom, 44 px targets),
   the move-pin banner over the chart, and Info › My map edits. Tokens/classes come from css/app.css. */

/* ---- editor fields (bottom sheet) ---- */
#sheet .fld{display:block;font:600 12px var(--font);color:var(--mute);margin-top:12px;letter-spacing:.02em}
#sheet .fld input,#sheet .fld select,#sheet .fld textarea{display:block;width:100%;min-height:44px;margin-top:4px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:16px var(--font);color:var(--ink);background:var(--card);-webkit-appearance:none;appearance:none;box-sizing:border-box}
#sheet .fld select{background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
#sheet .fld textarea{resize:vertical;line-height:1.4;min-height:84px}
#sheet .fld input:focus,#sheet .fld select:focus,#sheet .fld textarea:focus{outline:2px solid var(--navy-2);outline-offset:1px;border-color:var(--navy-2)}
#sheet .fld-err{margin-top:8px;padding:8px 12px;border-radius:8px;background:var(--bad-bg);color:var(--bad);font:600 13px var(--font)}
#sheet .ed-form .acts{margin-top:16px}

/* ---- move-pin banner (over the chart, under the chips row) ---- */
#edits-mode{position:absolute;left:12px;right:12px;top:calc(var(--mapbar-b, 58px) + 2px);z-index:803;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:12px;background:rgba(20,35,44,.92);color:#fff;font:600 14px/1.3 var(--font);box-shadow:var(--shadow-2)}
#edits-mode[hidden]{display:none}
#edits-mode .t{flex:1;min-width:0}
#edits-mode .btn{flex:none;min-height:44px;padding:0 14px;background:var(--card);color:var(--navy);border:0}
body.tracking #edits-mode{top:118px}
body.tracking.following #edits-mode{top:174px}   /* route follow: under the next-stop line (2.0.5) */
body.moving-pin #map{cursor:crosshair}
body.moving-pin .leaflet-marker-icon{cursor:crosshair}

/* ---- Info › My map edits ---- */
#info-edits-body .lede b{color:var(--ink);font-weight:600}
#info-edits-body .ed-stat{margin-top:4px}
#info-edits-body .ed-h{font:700 15px var(--font);color:var(--ink);padding:14px 16px 6px}
#info-edits-body .ed-list{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#info-edits-body .ed-empty{padding:0 16px 12px;color:var(--mute);font-size:14px;text-align:left}
#info-edits-body .ed-damaged{margin:0 16px 8px;padding:8px 12px;border-radius:8px;background:var(--warn-bg);color:var(--warn);font:600 13px/1.4 var(--font)}
#info-edits-body .ed-damaged b{color:var(--bad)}
#info-edits-body .ed-block{padding-bottom:6px}
#info-edits-body .ed-names{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 10px}
#info-edits-body .ed-chip{min-height:44px;padding:0 14px;border-radius:22px;background:var(--card);border:1px solid var(--line);font:600 13px var(--font);color:var(--navy-2)}
#info-edits-body .ed-act{padding:0 16px 12px}
#info-edits-body .ed-act .btn{display:inline-flex;padding:0 14px}
#info-edits-body .ed-rows{background:var(--card);border-top:1px solid var(--line)}
#info-edits-body .ed-row{display:flex;align-items:center;gap:12px;padding:8px 16px;border-bottom:1px solid var(--line);min-height:56px}
#info-edits-body .ed-name{flex:1;min-width:0;font:600 16px/1.2 var(--font);color:var(--ink)}
#info-edits-body .ed-name small{display:block;font:400 13px var(--font);color:var(--mute);margin-top:2px}
#info-edits-body .ed-row .btn{flex:none;min-height:44px;padding:0 14px;font-size:14px}

/* ---- 2.0.9 "Add a buoy here" in the long-press sheet ---- */
#sheet .ed-buoys{margin-top:10px}
#sheet .ed-bh{font:700 12px var(--font);color:var(--mute);letter-spacing:.06em;text-transform:uppercase;margin:10px 0 6px}
#sheet .ed-bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#sheet .ed-bk{display:flex;align-items:center;gap:6px;min-height:48px;padding:4px 8px;border-radius:10px;background:var(--surf);border:1px solid var(--line);font:600 13px/1.15 var(--font);color:var(--ink);text-align:left}
#sheet .ed-bk svg{width:24px;height:24px;flex:none}
#sheet .ed-bk:active{background:#E3ECF1}
@media (max-width:360px){#sheet .ed-bgrid{grid-template-columns:1fr 1fr}}

/* ---- 2.0.9 pair editor: a bottom panel over the chart at thumb height (44 px targets); the chart above stays live for dragging ---- */
.pairedit{position:absolute;left:8px;right:8px;bottom:calc(var(--tab-h) + var(--safe-b) + 8px);z-index:1005;max-width:520px;margin:0 auto;max-height:calc(100% - var(--tab-h) - 150px);overflow:auto;-webkit-overflow-scrolling:touch;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-2);padding:10px 12px 12px;font:14px/1.35 var(--font);color:var(--ink)}
.pairedit[hidden]{display:none}
.pairedit .pe-h{display:flex;align-items:center;gap:8px}
.pairedit .pe-h b{font:700 17px var(--font)}
.pairedit .pe-g svg{width:26px;height:26px;display:block}
.pairedit .pe-est{margin:6px 0 0;font-size:13px;color:var(--mute)}
.pairedit .pe-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.pairedit .pe-l{flex:1;min-width:0;font:600 12px var(--font);color:var(--mute)}
.pairedit .pe-l b{display:block;font:700 16px var(--font);color:var(--ink)}
.pairedit .pe-b{flex:none;width:56px;height:44px;border-radius:10px;background:var(--surf);border:1px solid var(--line);font:700 22px/1 var(--font);color:var(--ink)}
.pairedit .pe-b:active,.pairedit .btn.sec:active{background:#E3ECF1}
.pairedit .pe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.pairedit .pe-grid .btn{font-size:14px;line-height:1.15}
.pairedit .btn[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.pairedit .pe-hint{margin:8px 0 0;font-size:13px}
.pairedit .pe-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px;margin-top:10px}
.pairedit .pe-note{margin:8px 0 0;font-size:12px;color:var(--mute)}
body.pairing #toast{bottom:auto;top:calc(var(--safe-t) + 64px)}   /* never over the panel's Save */
body.pairing .leaflet-markers-pane .leaflet-marker-icon,body.pairing .leaflet-marker-pane .leaflet-marker-icon,body.pairing .leaflet-bridges-pane .leaflet-marker-icon,body.pairing .leaflet-shops-pane .leaflet-marker-icon{pointer-events:none}   /* taps reach the chart (Move pair), not a sheet */
.peicon .peb{width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:grab}
.peicon .peb svg{width:30px;height:30px;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.peicon .pem{width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:grab}
.peicon .pem::after{content:'';width:14px;height:14px;border-radius:50%;background:#fff;border:2.5px solid #1B232A;box-shadow:0 1px 3px rgba(0,0,0,.35)}