/* ===== REFINE — visual modernisation layer + the new add/edit composer.
   Loaded LAST, so it wins ties without touching the existing sheets.
   Direction: sharpen what Atlas already is (a field survey document — mono
   coordinates, hairline rules, boarding-pass panels) instead of restyling it
   into a generic dashboard. ===== */

/* ---------- extra tokens ---------- */
:root{
  /* elevation: three real steps instead of one flat --shadow everywhere */
  --e1:0 1px 2px rgba(2,5,18,.4), 0 2px 6px rgba(2,5,18,.28);
  --e2:0 4px 12px rgba(2,5,18,.42), 0 12px 32px rgba(2,5,18,.36);
  --e3:0 12px 28px rgba(2,5,18,.5), 0 40px 80px rgba(2,5,18,.5);
  --ring:0 0 0 3px rgba(240,178,74,.26);
  --hair:rgba(126,148,196,.14);
  --raise:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0));
  --ok:#45c4b0;
  --spring:cubic-bezier(.22,1.2,.36,1);
  --ease:cubic-bezier(.2,.8,.2,1);
  --gold-hi:#f6c163; --gold-lo:#f0b24a;
}
html[data-theme="light"]{
  --e1:0 1px 2px rgba(24,33,54,.1), 0 2px 6px rgba(24,33,54,.07);
  --e2:0 4px 12px rgba(24,33,54,.11), 0 12px 30px rgba(24,33,54,.1);
  --e3:0 12px 26px rgba(24,33,54,.14), 0 36px 70px rgba(24,33,54,.16);
  --ring:0 0 0 3px rgba(185,111,16,.2);
  --hair:rgba(24,33,54,.1);
  --raise:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.4));
  --gold-hi:#e0a63f; --gold-lo:#c07f18;
}

/* ---------- controls ---------- */
.btn,.smallbtn,.lbtn,.hbtn,.navpill,.chip,.fchip,.reactBtn{
  transition:background .16s var(--ease),border-color .16s var(--ease),
             color .16s var(--ease),transform .12s var(--spring),box-shadow .16s var(--ease)}
.btn:active,.smallbtn:active,.lbtn:active,.hbtn:active,.navpill:active,.chip:active{transform:translateY(1px) scale(.985)}

.btn.gold,.hbtn.primary,.lbtn.gold{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));
  box-shadow:var(--e1),inset 0 1px 0 rgba(255,255,255,.34)}
.btn.gold:hover:not(:disabled),.lbtn.gold:hover{filter:brightness(1.06);box-shadow:var(--e2),inset 0 1px 0 rgba(255,255,255,.34)}
.btn.ghost,.smallbtn,.lbtn:not(.gold){background-image:var(--raise)}
.btn.ghost:hover,.smallbtn:hover,.lbtn:not(.gold):hover{border-color:var(--accent);color:var(--ink)}
.btn.ghost.gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo))}
.btn.danger{background:linear-gradient(180deg,#ec7189,var(--danger));box-shadow:var(--e1)}

/* focus that reads on both themes */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:var(--ring)}
input,select,textarea{transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
input::placeholder,textarea::placeholder{color:var(--faint)}

/* panels get real depth */
.ticket,.modal,#searchResults,#collPickMenu,#ctlMenu,#addMenu{box-shadow:var(--e3)}
#drawer.open,#savedSheet.open{box-shadow:var(--e2)}
.chip,.navpill,.hbtn{box-shadow:var(--e1)}

/* ---------- modal: entrance + shell ---------- */
.overlay{background:rgba(4,7,18,.62);backdrop-filter:blur(6px) saturate(.9)}
html[data-theme="light"] .overlay{background:rgba(24,33,54,.34)}
.overlay.open{animation:ovIn .18s var(--ease)}
.overlay.open>.modal{animation:mdIn .34s var(--spring)}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
@keyframes mdIn{from{opacity:0;transform:translateY(14px) scale(.976)}to{opacity:1;transform:none}}
.modal{border-radius:20px}
.modal-head{padding:15px 20px;border-bottom:1px solid var(--hair)}
.modal-head h2{letter-spacing:.03em;font-size:16.5px}
.modal-foot{border-top:1px solid var(--hair);background:linear-gradient(180deg,transparent,rgba(0,0,0,.12))}
html[data-theme="light"] .modal-foot{background:linear-gradient(180deg,transparent,rgba(24,33,54,.035))}

/* ================================================================
   THE COMPOSER — add / edit a place
   Three named stages, always clickable, never a locked wizard.
   ================================================================ */
.modal.composer{width:600px}
@media(max-width:700px){
  .modal.composer{width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0}
}

/* --- stage rail (the head) --- */
.stageRail{display:flex;gap:2px;padding:0 14px 12px;border-bottom:1px solid var(--hair)}
.stage{flex:1;display:flex;flex-direction:column;gap:6px;padding:8px 10px 0;border-radius:10px;
  text-align:left;position:relative;color:var(--muted)}
.stage:hover{color:var(--ink);background:var(--accent-soft)}
.stage .sNum{font-family:var(--mono);font-size:10px;letter-spacing:.14em;opacity:.75}
.stage .sName{font-size:12.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.stage .sBar{height:2px;border-radius:2px;background:var(--input-border);margin-top:2px;
  transition:background .25s var(--ease)}
.stage.on{color:var(--ink)}
.stage.on .sBar{background:var(--accent)}
.stage.done .sBar{background:color-mix(in srgb,var(--ok) 70%,transparent)}
.stage .sTick{position:absolute;top:6px;right:8px;color:var(--ok);opacity:0;transition:opacity .2s}
.stage.done .sTick{opacity:1}
.stage .sTick .ic{width:13px;height:13px}

/* --- panes --- */
.pane{display:none}
.pane.on{display:block;animation:paneIn .26s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.paneLede{font-size:13px;color:var(--muted);line-height:1.5;margin:-2px 0 14px}

/* --- the one search box that does everything --- */
.finder{position:relative;margin-bottom:12px}
.finder input{padding:13px 15px 13px 40px;font-size:15px;border-radius:13px;
  background:var(--input);border-width:1.5px}
.finder .fIcon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.finder .fSpin{position:absolute;right:13px;top:50%;transform:translateY(-50%);display:none}
.finder.busy .fSpin{display:block}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--input-border);
  border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.finder.busy .fSpin .spin{vertical-align:middle}

.fResults{position:absolute;z-index:8;top:calc(100% + 6px);left:0;right:0;display:none;
  background:var(--panel-solid);border:1px solid var(--panel-border);border-radius:14px;
  box-shadow:var(--e3);overflow:hidden;max-height:290px;overflow-y:auto}
.fResults.on{display:block}
.fRes{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;padding:11px 14px;
  border-bottom:1px solid var(--hair)}
.fRes:last-child{border-bottom:none}
.fRes:hover,.fRes.cursor{background:var(--accent-soft)}
.fRes .fKind{flex:none;width:26px;height:26px;border-radius:8px;background:var(--input);
  border:1px solid var(--input-border);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.fRes .fKind .ic{width:14px;height:14px}
.fRes .fTxt{min-width:0;flex:1}
.fRes b{display:block;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fRes small{display:block;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fEmpty{padding:14px;font-size:12.5px;color:var(--muted);text-align:center}

/* --- the signature: a live survey card, map + mono readout --- */
.survey{border:1px solid var(--input-border);border-radius:14px;overflow:hidden;background:var(--input);margin-bottom:14px}
.miniMap{height:190px;width:100%;background:var(--input);position:relative}
.miniMap.empty{height:136px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;
  color:var(--faint);font-size:12.5px;text-align:center;padding:0 24px}
.miniMap.empty .ic{width:22px;height:22px}
.miniMap .leaflet-control-attribution{font-size:9px;opacity:.6}
.surveyBar{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--input-border);
  background:var(--panel-solid);flex-wrap:wrap}
.coordOut{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--ink);flex:1;min-width:130px}
.coordOut.none{color:var(--faint)}
.coordOut span{color:var(--muted)}
.surveyHint{font-size:11px;color:var(--muted);width:100%;margin-top:-2px}

/* the raw lat/lon pair, tucked away but reachable */
.disclose{border-top:1px solid var(--hair);margin-top:12px;padding-top:10px}
.discloseBtn{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--muted);
  letter-spacing:.03em;padding:2px 0}
.discloseBtn:hover{color:var(--accent)}
.discloseBtn .caret{transition:transform .2s var(--ease);display:inline-block;font-size:10px}
.disclose.open .discloseBtn .caret{transform:rotate(90deg)}
.discloseBody{display:none;padding-top:12px}
.disclose.open .discloseBody{display:block;animation:paneIn .2s var(--ease)}

/* --- field-level validation --- */
.frow.bad input,.frow.bad textarea{border-color:var(--danger);box-shadow:0 0 0 3px rgba(228,96,122,.18)}
.fErr{display:none;font-size:11.5px;color:var(--danger);margin-top:5px;font-weight:600}
.frow.bad .fErr{display:block}
.req{color:var(--accent);font-weight:700}
.optional{font-weight:400;text-transform:none;letter-spacing:0;color:var(--faint)}

/* Auto-fill is a helper, not the main event: quiet outline, amber mark. */
.aibtn{background:var(--input);background-image:var(--raise);color:var(--ink);
  border:1px solid var(--input-border);box-shadow:var(--e1)}
.aibtn:hover:not(:disabled){border-color:var(--accent)}
.aibtn .ic{color:var(--accent)}

/* --- tag picker: bigger targets, colour-true --- */
#fTags{gap:7px}
#fTags .chip{padding:8px 13px;font-size:12.5px;border-width:1.5px;box-shadow:none}
#fTags .chip.on{box-shadow:var(--e1)}

/* --- photos --- */
.dropzone{border:1.5px dashed var(--input-border);border-radius:14px;padding:26px 16px;text-align:center;
  color:var(--muted);font-size:13px;background:var(--input);
  transition:border-color .16s var(--ease),background .16s var(--ease),color .16s var(--ease)}
.dropzone:hover{border-color:var(--accent);color:var(--ink)}
.dropzone.over{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);border-style:solid}
.dropzone .dzIcon{display:block;margin:0 auto 8px;color:var(--accent)}
.dropzone .dzIcon .ic{width:24px;height:24px}
.dropzone b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:3px}
.dropzone small{font-size:11.5px;color:var(--muted)}
.thumbrow{gap:9px;margin-top:12px}
.thumb{width:88px;height:66px;border-radius:10px;border-width:1.5px;cursor:grab;box-shadow:var(--e1)}
.thumb.drag{opacity:.4}
.thumb.overdrop{border-color:var(--accent);box-shadow:var(--ring)}
.thumb .cover{position:absolute;left:0;bottom:0;right:0;background:linear-gradient(0deg,rgba(4,7,18,.85),transparent);
  color:#fff;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:8px 5px 3px;text-align:center}
.thumb button{width:20px;height:20px;background:rgba(4,7,18,.72)}
.thumb button:hover{background:var(--danger)}

/* --- footer: stage nav on the left, one primary on the right --- */
.composerFoot{justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.composerFoot .footL{display:flex;gap:8px;align-items:center;min-width:0}
.composerFoot .footR{display:flex;gap:8px;align-items:center;margin-left:auto}
.saveHint{font-size:11px;color:var(--faint);font-family:var(--mono)}
@media(max-width:700px){
  .saveHint{display:none}
  .composerFoot .btn{flex:1}
  .modal.composer .modal-body{flex:1}
}

/* draft chip */
.draftNote{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);
  background:var(--accent-soft);border:1px solid var(--input-border);border-radius:10px;
  padding:9px 11px;margin-bottom:12px}
.draftNote button{font-size:11.5px;font-weight:700;color:var(--accent);text-decoration:underline;padding:0}
.draftNote .ic{width:15px;height:15px;color:var(--accent);flex:none}

/* the "you're editing someone else's place" banner */
.calloutBox{border:1px solid var(--input-border);background:var(--accent-soft);border-radius:12px;
  padding:11px 13px;color:var(--ink);font-size:12.5px;line-height:1.5;display:flex;gap:10px;align-items:flex-start}
.calloutBox .ic{width:16px;height:16px;color:var(--accent);flex:none;margin-top:1px}

/* ---------- small global polish ---------- */
#toast{border-radius:12px;box-shadow:var(--e3)}
.ticket-title{letter-spacing:-.005em}
.eyebrow{letter-spacing:.2em}
.datacell{background-image:var(--raise)}
.thumb img{transition:transform .3s var(--ease)}
.thumb:hover img{transform:scale(1.06)}

@media (prefers-reduced-motion:reduce){
  .overlay.open,.overlay.open>.modal,.pane.on{animation:none}
}

/* --- the composer's map pin (CSS only, no CDN images) --- */
.composerPin{background:none;border:none}
.composerPin .cpDot{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:20px;height:20px;border-radius:50%;background:var(--accent);
  border:2.5px solid #10142c;box-shadow:0 0 0 2px rgba(255,255,255,.45),0 3px 10px rgba(2,5,18,.5)}
.composerPin .cpStem{position:absolute;top:17px;left:50%;transform:translateX(-50%);
  width:2px;height:12px;background:#10142c;border-radius:1px;opacity:.85}
.leaflet-marker-draggable{cursor:grab}
.leaflet-marker-draggable:active{cursor:grabbing}

/* --- Leaflet's stock controls, dressed to match the composer --- */
.miniMap .leaflet-control-zoom{border:none;box-shadow:var(--e1);border-radius:9px;overflow:hidden}
.miniMap .leaflet-control-zoom a{background:var(--panel-solid);color:var(--ink);
  border:1px solid var(--panel-border);width:28px;height:28px;line-height:26px;font-size:16px}
.miniMap .leaflet-control-zoom a:hover{background:var(--input);color:var(--accent)}
.miniMap .leaflet-control-zoom a:first-child{border-bottom:none}
.miniMap .leaflet-control-attribution{background:transparent;color:var(--faint);
  font-size:9px;padding:0 5px;text-shadow:0 1px 2px var(--bg)}
.miniMap .leaflet-control-attribution a{color:var(--muted)}
.miniMap .leaflet-control-attribution svg{display:none}

/* --- desktop: hold the modal at one height so stages don't jump --- */
@media(min-width:701px){
  .modal.composer .modal-body{height:min(60vh,528px);overflow-y:auto}
}

/* --- mobile: the header X already closes, so Cancel is redundant here and
       only squeezes the primary action into two lines --- */
@media(max-width:700px){
  .composerFoot .footL{display:none}
  .composerFoot .footR{width:100%}
  .composerFoot .btn{flex:1;white-space:nowrap;padding:12px 10px}
  .composerFoot #saveDest{flex:1.6}
}

/* --- tour builder: stops are a route, so order is the point --- */
.stopEdit{display:flex;gap:6px;align-items:center;padding:4px 6px;border-radius:9px;
  border:1px solid transparent;cursor:grab;
  transition:background .14s var(--ease),border-color .14s var(--ease),transform .14s var(--spring)}
.stopEdit:hover{background:var(--input);border-color:var(--input-border)}
.stopEdit.dragging{opacity:.4;cursor:grabbing}
.stopEdit.dropTarget{border-color:var(--accent);background:var(--accent-soft)}
.stopEdit .grip{flex:none;width:12px;height:16px;opacity:.5;
  background-image:radial-gradient(currentColor 1px,transparent 1px);
  background-size:5px 5px;background-position:0 2px;color:var(--muted)}
.stopEdit:hover .grip{opacity:.9;color:var(--accent)}