/* Map your site page */
.map-page { background: var(--bg-alt); }
.nav a[aria-current="page"] { color: var(--gold); }

.mapper { display: grid; grid-template-columns: 380px 1fr; height: calc(100vh - 87px); height: calc(100svh - 87px); }
.panel { background: #fff; border-right: 1px solid var(--line); padding: 24px 22px 28px; overflow-y: auto; }
.panel h1 { font-size: 1.7rem; margin-bottom: .2em; }
.panel-lede { color: var(--muted); font-size: .95rem; margin-bottom: 20px; }
.map-wrap { position: relative; min-height: 360px; }
#map { position: absolute; inset: 0; background: #1b2433; }

.search label, .step-label { display: block; font: 700 .95rem "Archivo", sans-serif; color: var(--navy); margin-bottom: 8px; }
.search-row { display: flex; gap: 8px; }
.panel input[type=text] { width: 100%; font: inherit; font-size: .95rem; padding: 11px 12px; border: 1px solid #c9d1de; border-radius: 8px; color: var(--ink); background: #fff; }
.panel input[type=text]:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.search-msg { min-height: 1.2em; font-size: .85rem; color: var(--muted); margin: 6px 0 14px; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-2); }
.search .btn { padding: 11px 18px; }

.step { margin-top: 6px; margin-bottom: 18px; }
.tools { display: grid; gap: 8px; }
.tool { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left;
  font: 600 .95rem "Inter", sans-serif; color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; cursor: pointer; }
.tool small { grid-column: 2; font-weight: 400; font-size: .8rem; color: var(--muted); }
.tool .sw { grid-row: 1 / span 2; }
.tool:hover { border-color: #b9c3d3; }
.tool.active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; background: #fffaf0; }
.sw { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; font: 800 .95rem "Archivo", sans-serif; color: #fff; }
.sw-plow { background: rgba(224,188,74,.55); border: 2px solid #c9a227; }
.sw-walk { background: linear-gradient(transparent 40%, #22d3ee 40%, #22d3ee 60%, transparent 60%), #0f2240; }
.sw-stack { background: #2563eb; border-radius: 50%; }
.sw-hazard { background: #dc2626; border-radius: 50%; }
.sw-erase { background: #5a6577; font-size: 1.3rem; }

.draw-bar { margin-top: 10px; background: var(--navy); color: #fff; border-radius: 8px; padding: 10px 12px; font-size: .88rem; }
.draw-actions { display: flex; gap: 8px; margin-top: 8px; }
.btn-small { font: 600 .85rem "Inter", sans-serif; padding: 7px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; cursor: pointer; }
.btn-small-gold { background: var(--gold); border-color: var(--gold); color: var(--navy); }

.totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--bg-alt); border-radius: 8px; padding: 12px; }
.totals div { display: flex; flex-direction: column; }
.t-num { font: 800 1.25rem "Archivo", sans-serif; color: var(--navy); }
.t-lbl { font-size: .75rem; color: var(--muted); }
.fine { font-size: .8rem; color: var(--muted); margin: 8px 0 14px; }

.save-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.save-row .btn { padding: 12px 16px; font-size: .95rem; flex: 1 1 auto; }
.link-btn { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; font: inherit; font-size: .85rem; cursor: pointer; }

/* Map markers */
.pin { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 14px "Archivo", sans-serif; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.pin-stack { background: #2563eb; }
.pin-hazard { background: #dc2626; }
.vtx { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); }
.vtx-first { width: 16px; height: 16px; background: var(--gold); border-color: #fff; }
.erase-mode .leaflet-interactive { cursor: not-allowed; }

@media (max-width: 860px) {
  .mapper { grid-template-columns: 1fr; height: auto; }
  .map-wrap { order: -1; height: 62vh; height: 62svh; }
  .panel { border-right: 0; border-top: 1px solid var(--line); padding: 20px 16px 28px; }
}