/* ================================================================
   KORT OG GODT — Map App widget
   Shared shell + controls for map-based sub-apps.
   Controls live in the landing sidebar when Embedded (docs/adr/0004); otherwise
   they sit behind a rounded pill that opens a sheet. The .app-nav-back link is
   hidden in Embedded mode by theme.css.
   Load AFTER leaflet.css + modern.css.
   ================================================================ */

.mapapp-map { position: fixed; inset: 0; z-index: 0; background: var(--mapapp-bg, #e8e6e1); }

/* Floating chrome over the map (never a solid bar — keeps full map height). */
.mapapp-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; pointer-events: none;
}
.mapapp-header > * { pointer-events: auto; }
.mapapp-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface, #fff); color: var(--text, #1c1917);
    border: 1px solid var(--border, rgba(0,0,0,.06));
    border-radius: 999px; padding: 9px 16px; min-height: 40px;
    font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; font-weight: 500;
    text-decoration: none; box-shadow: 0 4px 16px rgba(28,25,23,.12); cursor: pointer;
}
.mapapp-title { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 18px; }

/* Leaflet zoom control: clear of the chrome. */
.leaflet-top.leaflet-right { margin-top: 64px; }

/* ---- Controls (the same markup mounts in the sidebar OR a floating sheet) ---- */
.mapapp-controls { font-family: 'DM Sans', system-ui, sans-serif; color: var(--text, #1c1917); }
.mapapp-controls-title { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 20px; margin: 0 0 4px; }

/* Mounted in the landing sidebar (dark) — wrap as a light card so it stays readable. */
.mapapp-controls.in-sidebar {
    background: var(--surface, #fff); color: var(--text, #1c1917);
    border-radius: 14px; padding: 14px 16px;
}

/* Floating presentation (not embedded): rounded pill button + slide-up sheet. */
.mapapp-fab {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1001;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(26,26,28,.9); color: #f4efe6; border: none; border-radius: 999px;
    padding: 11px 20px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; font-weight: 500;
    box-shadow: 0 8px 28px rgba(0,0,0,.35); cursor: pointer;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.mapapp-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1002; background: var(--surface, #fff);
    border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(28,25,23,.18);
    max-height: 72vh; overflow-y: auto; padding: 20px 18px 24px;
    transform: translateY(100%); transition: transform .28s ease;
}
.mapapp-sheet.open { transform: translateY(0); }
.mapapp-sheet-close {
    position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--border, rgba(0,0,0,.1)); background: var(--surface2, #f5f3ef);
    cursor: pointer; color: var(--text-muted, #78716c); line-height: 1;
}
@media (min-width: 768px) {
    .mapapp-fab { left: 18px; transform: none; }
    .mapapp-sheet { left: 18px; right: auto; bottom: 18px; width: 320px; border-radius: 16px; max-height: 78vh; transform: translateY(calc(100% + 28px)); }
    .mapapp-sheet.open { transform: translateY(0); }
}

/* ---- Control sections ---- */
.mapapp-section { border-top: 1px solid var(--border, rgba(0,0,0,.07)); padding: 16px 0 4px; }
.mapapp-section:first-child { border-top: none; padding-top: 4px; }
.mapapp-section-title {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted, #78716c); margin: 0 0 10px;
}
.mapapp-opt {
    display: flex; align-items: center; gap: 10px; padding: 8px 0;
    font-size: 14px; cursor: pointer; min-height: 36px;
}
.mapapp-opt input { accent-color: var(--coral, #EBBF60); width: 17px; height: 17px; }
.mapapp-swatch { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }

.mapapp-upload {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    border: 1px dashed var(--border-strong, #d6d3d1); border-radius: 10px;
    padding: 11px 14px; width: 100%; font-size: 14px; color: var(--text-muted, #57534e);
}
.mapapp-upload input { display: none; }

/* Selected-feature detail card. */
.mapapp-detail {
    display: none; background: var(--surface2, #f5f3ef); border: 1px solid var(--border, rgba(0,0,0,.07));
    border-radius: 12px; padding: 16px 16px 18px; margin-bottom: 12px; position: relative;
}
.mapapp-detail.show { display: block; }
.mapapp-detail-close {
    position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 8px;
    border: 1px solid var(--border, rgba(0,0,0,.1)); background: var(--surface, #fff);
    cursor: pointer; color: var(--text-muted, #78716c); line-height: 1;
}
.mapapp-stat-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, #78716c); margin-bottom: 2px; }

.mapapp-loading {
    position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
    background: var(--mapapp-veil-bg, rgba(250,249,247,.86)); transition: opacity .3s ease;
    font-family: 'DM Sans', system-ui, sans-serif; color: var(--text-muted, #57534e); font-size: 14px;
}
.mapapp-loading.hidden { opacity: 0; pointer-events: none; }
.mapapp-spinner {
    width: 30px; height: 30px; border: 3px solid var(--coral, #EBBF60); border-top-color: transparent;
    border-radius: 50%; animation: mapapp-spin .8s linear infinite; margin: 0 auto 12px;
}
@keyframes mapapp-spin { to { transform: rotate(360deg); } }