/* map.css — AraiWa Bangkok Events MAP VIEW (ARAIWA-MAP-PROTO-V1).

   Loaded AFTER the shared events.css (absolute /discover/bangkok/events/assets/events.css), so all
   design tokens (--bg, --band-*, --cat-*, --radius, --font) come from there — this file only adds the
   map-view layout: view switch, filter chip rows, the map canvas, counters, the bottom drawer and the
   server-rendered fallback list. Mobile-first; the map column caps at the shared --maxw on desktop.
   No new palette, no marker design system (markers are painted in MapLibre layers, see map.js). */

/* The List | Map view switch (.mp-switch) lives in the SHARED events.css — both views render it. */

/* ---- filter chips ---------------------------------------------------------------------------------- */
.mp-filters { margin: 10px 0 6px; }
.mp-filters[hidden] { display: none; }
.mp-filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; align-items: center; }
.mp-filter-label { font: 600 11px/1 var(--font); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); min-width: 62px; }
.mp-chip {
  font: 500 13px/1 var(--font); padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--ink-2);
}
.mp-chip.is-active { background: var(--band-bg); border-color: var(--band-bg); color: var(--band-ink); }
.mp-chip:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* ---- counters + status + empty state ----------------------------------------------------------------- */
.mp-counts { font: 500 13px/1.5 var(--font); color: var(--ink-2); margin: 6px 0; }
.mp-status { font: 500 13px/1.5 var(--font); color: var(--ink-3); margin: 6px 0; }
.mp-status[hidden] { display: none; }
.mp-empty {
  border: 1px dashed var(--border-2); border-radius: var(--radius); background: var(--surface-tint);
  padding: 14px 16px; margin: 10px 0; font: 500 14px/1.55 var(--font); color: var(--ink-2);
}
.mp-empty[hidden] { display: none; }
.mp-empty button {
  font: 600 13px/1 var(--font); margin-top: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--indigo); color: var(--indigo); background: var(--surface); cursor: pointer;
}

/* ---- map canvas ------------------------------------------------------------------------------------------ */
.mp-map-wrap { position: relative; margin: 8px 0 14px; }
#mp-map {
  width: 100%; height: 58vh; min-height: 320px; max-height: 620px;
  border-radius: var(--radius); border: 1px solid var(--border-2); background: var(--surface-tint);
}
[data-map-app][hidden] { display: none; }

/* ---- drawer (selected event) ------------------------------------------------------------------------------ */
.mp-drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--surface); border-top: 1px solid var(--border-2);
  border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(20, 17, 14, 0.18);
  max-height: 62vh; overflow-y: auto;
}
.mp-drawer[hidden] { display: none; }
.mp-drawer-inner { padding: 16px 18px 22px; max-width: var(--maxw); margin: 0 auto; position: relative; }
.mp-drawer-close {
  position: absolute; top: 8px; right: 10px; font: 400 26px/1 var(--font); border: 0; background: none;
  color: var(--ink-3); cursor: pointer; padding: 6px 10px;
}
.mp-drawer-title { font: 700 18px/1.3 var(--font); color: var(--ink); margin: 2px 34px 6px 0; }
.mp-drawer-meta { font: 500 14px/1.5 var(--font); color: var(--ink-2); margin: 0 0 4px; }
.mp-drawer-venue { font: 500 14px/1.5 var(--font); color: var(--ink-2); margin: 0 0 6px; }
.mp-drawer-area { color: var(--ink-3); }
.mp-approx {
  font: 600 11px/1 var(--font); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--plus); background: var(--plus-soft); border-radius: 6px; padding: 3px 7px; margin-left: 4px;
}
.mp-drawer-transit { margin: 0 0 8px; padding-left: 18px; font: 400 13px/1.6 var(--font); color: var(--ink-2); }
.mp-drawer-fresh { font: 500 13px/1.5 var(--font); color: var(--change); margin: 0 0 6px; }
.mp-drawer-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 0; }
.mp-official, .mp-directions { font: 600 14px/1 var(--font); color: var(--indigo); text-decoration: none; }
.mp-official:hover, .mp-directions:hover { text-decoration: underline; }

/* ---- server-rendered fallback list -------------------------------------------------------------------------- */
.mp-list { display: grid; gap: 10px; margin: 6px 0 26px; }
.mp-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 15px; cursor: pointer;
}
.mp-card[hidden] { display: none; }
.mp-card h3 { font: 650 15.5px/1.35 var(--font); color: var(--ink); margin: 0 0 4px; }
.mp-card p { font: 450 13.5px/1.55 var(--font); color: var(--ink-2); margin: 0 0 2px; }
.mp-card .mp-card-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 7px; align-items: center; }
.mp-card .mp-card-links a { font: 600 13px/1 var(--font); color: var(--indigo); text-decoration: none; }
.mp-card .mp-card-links a:hover { text-decoration: underline; }
.mp-cat {
  font: 600 11px/1 var(--font); text-transform: uppercase; letter-spacing: 0.05em; color: #fff;
  background: var(--c, var(--ink-3)); border-radius: 6px; padding: 3px 7px; display: inline-block; margin-bottom: 6px;
}
.mp-nomap {
  font: 600 11px/1 var(--font); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-3); border: 1px solid var(--border-2); border-radius: 6px; padding: 3px 7px; margin-left: 6px;
}

/* Save button on this page reuses .ev-save from events.css (same anonymous on-device layer);
   the Add-to-calendar disclosure reuses .ev-cal from events.css (same server-rendered menu). */

/* ---- V2 decision surface additions ------------------------------------------------------------------------- */
.mp-filter-note { font: 450 12px/1.4 var(--font); color: var(--ink-3); }
.mp-locate {
  font: 600 13px/1 var(--font); padding: 6px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--indigo);
}
.mp-locate:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.mp-card.is-selected { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.mp-drawer-note { font: 500 14px/1.55 var(--font); color: var(--ink); margin: 0 0 6px; }
.mp-drawer-ctx { font: 450 13.5px/1.55 var(--font); color: var(--ink-2); margin: 0 0 5px; }
.mp-drawer-close:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* No decorative animation on this page; belt-and-braces for anything inherited. */
@media (prefers-reduced-motion: reduce) {
  .mp-drawer, .mp-chip, .mp-card { transition: none !important; animation: none !important; }
}

@media (min-width: 700px) {
  #mp-map { height: 62vh; }
  .mp-drawer { left: auto; right: 24px; bottom: 24px; width: 420px; border-radius: 16px;
    border: 1px solid var(--border-2); }
}