/*Map Blog Styles sheet!*/
/* Map Blog™ — © 2025 Willy Simon. All rights reserved.
Built with Leaflet; map data © OpenStreetMap contributors. */

:root{
    --panelW: 440px;   /* desktop width (resizable) */
    --sheetH: 62vh;    /* mobile sheet height (resizable) */
    --topbarH: 52px;   /* top bar height */
}

html, body { height: 100%; margin: 0; }
#app { position: relative; height: 100%; }
#map { height: 100%; width: 100%; }

/* Lower Leaflet's top-left controls below topbar */
.leaflet-top.leaflet-left { margin-top: calc(var(--topbarH) + 17px); }

.leaflet-top.leaflet-right { margin-top: calc(var(--topbarH) + 15px); }

/* ===== Top Bar (desktop-first) ===== */
.topbar{
    position:absolute; left:8px; right:8px; top:8px; height: var(--topbarH);
    display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px;
    background:#ffffff; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 1400;
}
.brand{ font-weight:700; letter-spacing:.2px; padding-right:6px; }
.topbar .sep{ width:1px; align-self:stretch; background:#eee; }
.topbar input[type="search"]{
    min-width: 280px; max-width: 40vw; width: 28vw;
    padding:8px 10px; border:1px solid #e6e6e6; border-radius:10px; font:inherit;
    background:#fafafa;
}
.topbar select{ padding:8px 10px; border:1px solid #e6e6e6; border-radius:10px; font:inherit; background:#fff; }
.btn { display:inline-block; padding:8px 12px; border:1px solid #ddd; border-radius:10px; background:#fff; cursor:pointer; }

/* Add-mode visual cue */
.add-mode-cue{ position:absolute; left:50%; transform:translateX(-50%); top: calc(var(--topbarH) + 14px);
    background:#111; color:#fff; padding:6px 10px; border-radius:999px; font-size:12px; z-index:1400; box-shadow: 0 6px 16px rgba(0,0,0,.18); display:none; }
.app-add-mode .add-mode-cue{ display:block; }
.app-add-mode #map { cursor: crosshair; }

/* Legacy IO (export/import) stays for now */
/* .io { position:absolute; top: calc(var(--topbarH) + 16px); left: 12px; z-index:1100; display:flex; gap:8px; opacity:1; transition: opacity .2s ease; }
.panel-open .io { opacity:0; pointer-events:none; } */

.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] .menu-pop { display: block; }
.menu-pop {
position: absolute; top: 100%; right: 0;
background: #fff; border: 1px solid #eee; border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px; display: none; z-index: 1500;
}
.menu-pop .btn { display: block; width: 100%; text-align: left; margin: 4px 0; }


/* Inputs (forms) */
form .row { display: grid; gap: 8px; margin: 10px 0; }
label span { display:block; font-size: 12px; color:#555; margin-bottom: 4px; }
input[type="text"], input[type="date"], textarea { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #ddd; font: inherit; }
textarea { min-height: 110px; resize: vertical; }

/* Images: contain, not crop */
.post-img { display:block; width:100%; height:auto; max-height:70vh; object-fit:contain; border-radius:10px; margin:10px 0; background:#f8f8f8; }

/* Controls polish */
.leaflet-control-layers { max-height:60vh; overflow:auto; box-shadow: 0 6px 18px rgba(0,0,0,.12); border-radius:10px; background:#fff; }
.leaflet-control-geocoder { max-width: 280px; }

/* .beta-badge{
    position:fixed; right:12px; bottom:15px; z-index:2000;
    background:#111; color:#fff; font:13px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;
    padding:8px 10px; border-radius:10px; box-shadow:0 6px 16px rgba(0,0,0,.2);
    opacity:.92;
  }

small {
    position:fixed; left:12px; bottom:5px; z-index:1000;
    background:#111; color:#fff; font:11px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;
    padding:8px 10px; border-radius:10px; box-shadow:0 6px 16px rgba(0,0,0,.2);
    opacity:.92;
} */

.app-badge{
    position: fixed;
    left: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 12px);
    z-index: 1000;
    background: #111;
    color: #fff;
    padding: 8px 12px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
    font: 13px/1.25 system-ui, -apple-system, Segoe UI, Roboto, Arial;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    max-width: min(90vw, 780px);
    pointer-events: none; /* let map clicks pass through */
  }
  .app-badge .tm { font-size: .9em; vertical-align: top; margin-left: 1px; }
  .app-badge .sep { opacity: .35; }
  @media (max-width: 480px){
    .app-badge{ font-size: 12px; }
  }
  
  

/*this helps highlight the post when one is selected or panned to*/

    /* Tiny temp marker */
/* make temp marker colorable too */
.temp-dot{
    width:14px; height:14px; border-radius:50%;
    background: var(--dot, #111);
    border:2px solid #fff;
    box-shadow:0 0 0 2px rgba(0,0,0,.2);
}

.post-dot.pulse {
    box-shadow: 0 0 0 6px rgba(17,17,17,.18), 0 0 0 12px rgba(17,17,17,.08);
}

.post-dot { 
    width: 10px; 
    height: 10px; 
    border-radius: 50%;
    background: var(--dot, #111); 
    border: 1px solid #fff; 
    box-shadow: 0 0 1px rgba(0,0,0,.4);
    transition: box-shadow .35s ease;
}



/* ===== Panel base (desktop/ mobile with resizer) ===== */
#panel { position:absolute; z-index:1500; transition: transform .25s ease; box-shadow: 0 10px 30px rgba(0,0,0,.15); background:#fff; }
#panel.dragging { transition: none !important; }
#panel h2 { margin: 0 0 6px; }
.meta { color:#666; font-size:12px; margin-bottom:10px; }

/* Mobile-only UI: hidden by default (prevents desktop bleed-through) */
.fab, .addbar, .crosshair { display: none; }

/* Header cleanup */
.post-header{display:flex;align-items:center;gap:8px;margin:0 0 8px;}
.post-header h2{margin:0;line-height:1.2}
.post-head-actions{margin-left:auto;display:flex;gap:6px;align-items:center}

/* Icon buttons (X / ⋯) */
.iconbtn{
    width:32px;height:32px;display:grid;place-items:center;cursor:pointer;
    background:#fff;border:1px solid #e6e6e6;border-radius:8px;line-height:1;
}

/* Use your existing .menu styles; just tighten the buttons a bit */
.menu-pop .btn.small{font-size:13px;padding:6px 8px}
.btn.danger{border-color:#f6d3d3;color:#a33}

/* Sticky footer actions inside the scrolling panel content */
.panel-actions{
    position:sticky;bottom:0;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    padding:10px 0 0;margin-top:16px;
}
.panel-actions .btn{min-height:40px;border-radius:20px}
.btn.primary{background:#111;color:#fff;border-color:#111}



/* Desktop drawer */
@media (min-width: 900px) {
    #panel { inset: 0 auto 0 0; width: clamp(300px, var(--panelW), min(900px, 80vw)); border-right: 1px solid #eee; overflow-y: auto; padding: 16px; transform: translateX(-100%); }
    #panel.open { transform: translateX(0); }
    #panel-resizer { position:absolute; top:0; right:-4px; width:8px; height:100%; cursor: ew-resize; }
    #panel-resizer:after { content:""; position:absolute; top:50%; transform:translateY(-50%); right:2px; width:4px; height:44px; border-radius:999px; background:#e5e5e5; }
}

@media (max-width:899px){
    .panel-actions{padding-bottom:calc(env(safe-area-inset-bottom) + 10px)}
}

/* Mobile sheet */
@media (max-width: 899px) {
    #panel { left:0; right:0; bottom:0; height: var(--sheetH); border-top-left-radius:12px; border-top-right-radius:12px; box-shadow: 0 -8px 30px rgba(0,0,0,.18); overflow-y:auto; padding: 12px 16px 16px; transform: translateY(100%); }
    #panel.open { transform: translateY(calc(100% - var(--sheetH))); }
    #panel::before { content:""; display:block; width:44px; height:5px; border-radius:999px; background:#ddd; margin:6px auto 10px; }
    #panel-resizer { position:absolute; top:0; left:50%; transform: translateX(-50%); width: 66px; height: 20px; cursor: ns-resize; }

}

@media (max-width: 899px) {
    .topbar { display: none; }
    .leaflet-top.leaflet-left,
    .leaflet-top.leaflet-right { margin-top: 12px; } /* no topbar offset needed */
    .crosshair { top: 50%; } /* was calc(var(--topbarH) + 50%) */
}


/* 1) Phone tweak: bump default sheet height & keep topbar minimal */
@media (max-width: 899px) {
    :root { --sheetH: 70vh; } /* override your 62vh on phones */

    /* Optional: declutter topbar on phones (hide large controls) */
    .topbar input[type="search"],
    .topbar select { display: none; }
}

/* 2) FABs (floating buttons) */
@media (max-width: 899px) {
    .fab {
    position: fixed;
    right: calc(env(safe-area-inset-right) + 16px);
    bottom: calc(env(safe-area-inset-bottom) + 16px);
    width: 56px; height: 56px; border-radius: 9999px;
    display: grid; place-items: center;
    background: #111; color: #fff; border: none;
    box-shadow: 0 6px 16px rgba(0,0,0,.20);
    z-index: 1600; cursor: pointer;
    font-size: 22px; line-height: 1;
    }
    .fab--posts {
    right: calc(env(safe-area-inset-right) + 16px + 56px + 10px);
    width: 44px; height: 44px; font-size: 13px; background: #fff; color: #111; border: 1px solid #ddd;
    }

    /* Hide the Posts FAB while adding (optional) */
    .app-add-mode .fab--posts { opacity: 0; pointer-events: none; }
}

/* 3) Crosshair (for precise add-mode positioning) */
@media (max-width: 899px) {
    .crosshair {
    position: fixed;
    left: 50%;
    top: calc(var(--topbarH) + 50%); /* stays visually centered beneath topbar */
    transform: translate(-50%, -50%);
    width: 44px; height: 44px; pointer-events: none;
    z-index: 1550; display: none;
    }
    .crosshair::before,
    .crosshair::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    }
    .crosshair::before { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #111; opacity: .9; }
    .crosshair::after  { width: 4px; height: 4px; border-radius: 50%; background: #111; }

    /* Show crosshair only in add-mode (you already toggle .app-add-mode) */
    .app-add-mode .crosshair { display: block; }
}

/* 4) Add bar (appears at bottom only in add-mode) */
@media (max-width: 899px) {
    .addbar {
    position: fixed; left: 0; right: 0; bottom: 0;
    display: none; gap: 8px; align-items: center;
    padding: 8px 12px calc(env(safe-area-inset-bottom) + 12px);
    background: #fff; border-top: 1px solid #eee;
    z-index: 1600;
    }
    .addbar .btn { flex: 1; min-height: 44px; border-radius: 12px; }
    .addbar .btn.primary { flex: 2; background:#111; color:#fff; border-color:#111; }

    .app-add-mode .addbar { display: flex; }
}

/* 5) Optional: make the topbar span full width on phones */
@media (max-width: 899px) {
    /* Skip this block if you like your current topbar as-is */
    .topbar {
    position: fixed; left: 0; right: 0; top: 0;
    border-radius: 0; height: var(--topbarH);
    }
    /* You already push Leaflet controls down; keep those margins. */
}

@media (max-width: 899px) {
    #panel { -webkit-overflow-scrolling: touch; }
    #panel.no-transform { transform: none !important; } /* temp while date field is focused */
}

@media (max-width: 899px) {
    #panel.no-transform {
    transform: none !important;
    transition: none !important; /* don't animate the jump */
    }
}

/* Mobile: prevent background rubber-banding and allow stable picker */
@media (max-width: 899px) {
    html, body { height: 100%; overscroll-behavior: none; }

    /* When a date field is focused, lock the sheet in place */
    #panel.sheet-fixed {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: var(--sheetH);
    transform: none !important;
    transition: none !important;
    -webkit-overflow-scrolling: auto;
    }

    /* Lock page scroll while picker is up */
    .lock-scroll {
    overflow: hidden !important;
    height: 100% !important;
    }
}




/* ===== Post list styles ===== */
.list-toolbar{ display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.list-toolbar input[type="search"]{ flex:1; padding:8px 10px; border:1px solid #e6e6e6; border-radius:10px; }
.post-list{ display:flex; flex-direction:column; gap:8px; }

/* ===== Post list styles ===== */
.post-item{
    text-align:left; padding:10px; border:1px solid #eee; border-radius:10px; cursor:pointer;
    background: var(--cardBg, #fff);
}
/* .post-item:hover{ filter: brightness(0.70); } keep hover subtle & tinted - could use this at some poitn - but I like the one below better for now*/

.post-item:hover{ background:#fafafa; } /*I still like this one actually - more so than the hover that filters brightness above*/

.post-item h3{ margin:0 0 4px; font-size:15px; }
.post-item .meta{ margin:0; }