/* GeoIntel mobile shell — phone layout only (≤ 768px). Desktop styles are untouched.
   Tokens follow the "GeoIntel Mobile" design: neutral navy chrome, category hues carry all colour. */

@media (min-width: 769px) {
    .m-sheet, .m-panel, .m-tabbar, .m-timechip { display: none !important; }
}

@media (max-width: 768px) {
:root {
    --m-bg: #0B1220;
    --m-surface: #141D2E;
    --m-surface-2: #1C2739;
    --m-ink: #E6EDF7;
    --m-muted: #8A98AE;
    --m-line: #263248;
    --m-bar: rgba(11, 18, 32, 0.96);
    --m-fade: rgba(11, 18, 32, 0.92);
    --m-display: "Barlow Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
    --m-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --m-tab: 66px;
    --m-safe-b: env(safe-area-inset-bottom, 0px);
    --m-safe-t: env(safe-area-inset-top, 0px);
}
html[data-theme="light"] {
    --m-bg: #F3F5F9;
    --m-surface: #FFFFFF;
    --m-surface-2: #E9EDF4;
    --m-ink: #101827;
    --m-muted: #5B6779;
    --m-line: #D9DEE7;
    --m-bar: rgba(243, 245, 249, 0.96);
    --m-fade: rgba(243, 245, 249, 0.92);
}

/* ---- Old phone chrome replaced by the shell ---- */
body.m-shell .fab-container,
body.m-shell #geo-prefs,
body.m-shell #filters-sheet,
body.m-shell #time-sheet,
body.m-shell #sheet-backdrop,
body.m-shell #sidebar,
body.m-shell .geo-tagline,
body.m-shell #geo-view-toggle,
body.m-shell .desktop-filters { display: none !important; }
body.m-shell { padding: 0 !important; }
body.m-shell #main-content { border-radius: 0; }

/* ---- Top bar: wordmark + status, reusing the existing header elements ---- */
body.m-shell .geo-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 2000;
    margin: 0; padding: calc(var(--m-safe-t) + 10px) 14px 12px;
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px;
    background: linear-gradient(180deg, var(--m-fade), transparent);
    pointer-events: none;
}
body.m-shell .geo-header-right { display: flex; align-items: center; gap: 8px; margin: 0; }
body.m-shell .geo-header .geo-title-block,
body.m-shell .geo-header .geo-header-right { position: static; pointer-events: auto; }
body.m-shell .geo-title-block { display: flex; align-items: center; gap: 8px; font-size: inherit; letter-spacing: 0; text-align: start; }
body.m-shell .geo-logo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--m-ink); box-shadow: 0 0 10px var(--m-ink); margin: 0; }
body.m-shell .geo-title { margin: 0; line-height: 1; }
body.m-shell .geo-title-main { font-family: var(--m-display); font-weight: 700; font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--m-ink); text-shadow: none; }
body.m-shell .geo-title-sub { display: none; }
body.m-shell .geo-meta {
    position: static; display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--m-mono); font-size: 12px; color: var(--m-muted);
    background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 999px; padding: 5px 10px;
}
body.m-shell .geo-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--m-ink); box-shadow: 0 0 8px var(--m-ink); animation: m-blink 2.4s ease-in-out infinite; }
body.m-shell[data-connection="offline"] .geo-status-dot,
body.m-shell[data-connection="stale"] .geo-status-dot { animation: none; opacity: 0.4; box-shadow: none; }
body.m-shell .geo-status-text { color: var(--m-ink); font-weight: 500; letter-spacing: 0.04em; }
body.m-shell .geo-meta-separator { opacity: 0.5; }
@keyframes m-blink { 50% { opacity: 0.35; } }

/* Map furniture clears the tab bar */
body.m-shell .leaflet-bottom { bottom: calc(var(--m-tab) + var(--m-safe-b)); }
body.m-shell .map-watermark,
body.m-shell[data-view-mode="3d"] .map-watermark { top: auto; left: auto; right: 14px; bottom: calc(var(--m-tab) + var(--m-safe-b) + 58px); font-size: 12px; opacity: 0.4; }
body.m-shell #new-events-pill { top: calc(var(--m-safe-t) + 58px); z-index: 2010; }
body.m-shell.m-tab-feed #new-events-pill,
body.m-shell.m-tab-filters #new-events-pill { display: none !important; }
body.m-shell .map-notice { z-index: 2005; }

/* Selected event on the flat map: a faint green halo so it stands out from its neighbours */
body.m-shell .map-marker-wrapper.is-focused { z-index: 1000 !important; }
body.m-shell .map-marker-wrapper.is-focused .map-marker-dot::before {
    content: ""; position: absolute; inset: -11px; border-radius: 50%;
    background: rgba(46, 229, 157, 0.18); border: 2px solid rgba(46, 229, 157, 0.75);
    box-shadow: 0 0 16px rgba(46, 229, 157, 0.45);
}

/* ---- Time chip (bottom-right, above the tab bar) ---- */
.m-timechip {
    position: fixed; z-index: 2010;
    bottom: calc(var(--m-tab) + var(--m-safe-b) + 14px); inset-inline-end: 14px;
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
    background: var(--m-surface); color: var(--m-ink); border: 1px solid var(--m-line); border-radius: 999px;
    font: 500 12px/1 var(--m-mono); cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.m-timechip span:last-child { color: var(--m-muted); }
body.m-tab-feed .m-timechip, body.m-tab-filters .m-timechip { display: none; }

/* ---- Tab bar ---- */
.m-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2100;
    display: grid; grid-template-columns: repeat(3, 1fr);
    height: calc(var(--m-tab) + var(--m-safe-b)); padding-bottom: var(--m-safe-b);
    background: var(--m-bar); border-top: 1px solid var(--m-line); backdrop-filter: blur(10px);
}
.m-tab {
    position: relative; display: grid; place-items: center; align-content: center; gap: 3px;
    background: none; border: 0; padding: 0; color: var(--m-muted); font: 500 11px/1 inherit; cursor: pointer;
}
.m-tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-tab.is-on { color: var(--m-ink); }
.m-tab:focus-visible { outline: 2px solid var(--m-ink); outline-offset: -4px; border-radius: 10px; }
.m-badge {
    position: absolute; top: 9px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: var(--m-ink); color: var(--m-bg);
    font: 600 10px/16px var(--m-mono); text-align: center;
}
.m-badge-dot { min-width: 8px; height: 8px; padding: 0; top: 12px; left: calc(50% + 10px); }
.m-badge[hidden] { display: none; }

/* ---- Event sheet ---- */
.m-sheet {
    position: fixed; left: 0; right: 0; z-index: 2050;
    bottom: calc(var(--m-tab) + var(--m-safe-b));
    max-height: calc(100dvh - var(--m-tab) - var(--m-safe-b) - var(--m-safe-t) - 56px);
    display: flex; flex-direction: column;
    background: var(--m-surface); color: var(--m-ink);
    border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px -10px rgba(0, 0, 0, 0.7);
    transform: translateY(110%); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.m-sheet.is-peek, .m-sheet.is-full { transform: none; }
.m-sheet.is-hidden { transform: translateY(110%); }
.m-sheet.is-peek { max-height: 42dvh; }
.m-sheet.is-peek .m-more { display: none; }
.m-sheet.is-peek .m-ev-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.m-sheet-head { flex: none; padding: 12px 0 10px; touch-action: none; cursor: grab; }
.m-grab { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--m-line); margin: 0 auto; }
.m-sheet-body { padding: 6px 16px 16px; overflow: auto; display: grid; gap: 12px; overscroll-behavior: contain; }
.m-ev-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.m-cat { display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1 var(--m-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-muted); }
.m-cat i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--m-muted)); box-shadow: 0 0 8px var(--c, transparent); }
.m-ago { font: 400 12px/1 var(--m-mono); color: var(--m-muted); font-variant-numeric: tabular-nums; margin-inline-start: auto; }
.m-x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--m-surface-2); color: var(--m-muted); font-size: 14px; display: grid; place-items: center; cursor: pointer; }
.m-place { font-family: var(--m-display); font-weight: 600; font-size: 24px; line-height: 1.05; letter-spacing: 0.01em; }
html[dir="rtl"] .m-place { font-family: inherit; font-size: 20px; }
.m-place[hidden] { display: none; }
.m-ev-text { font-size: 15px; line-height: 1.55; white-space: pre-line; }
.m-ev-text.ar { font-size: 16px; }
.m-ev-meta { display: flex; justify-content: flex-end; }
.m-langtoggle { border: 1px solid var(--m-line); background: none; color: var(--m-ink); border-radius: 999px; padding: 5px 10px; font: 500 12px/1 inherit; cursor: pointer; }
.m-langtoggle[hidden] { display: none; }
.m-media { display: grid; gap: 8px; }
.m-media[hidden] { display: none; }
.m-media img, .m-media video { width: 100%; max-height: 52dvh; object-fit: contain; border-radius: 10px; background: var(--m-surface-2); border: 1px solid var(--m-line); display: block; }
.m-media-load { border: 1px dashed var(--m-line); background: var(--m-surface-2); color: var(--m-muted); border-radius: 10px; padding: 18px; font: 500 13px/1 inherit; cursor: pointer; }
.m-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.m-act { display: grid; place-items: center; gap: 5px; min-height: 44px; padding: 8px 6px; border: 1px solid var(--m-line); border-radius: 10px; background: var(--m-surface-2); color: var(--m-ink); font: 500 12px/1 inherit; cursor: pointer; }
.m-act-primary { background: var(--m-ink); color: var(--m-bg); border-color: var(--m-ink); font-weight: 600; }
.m-act svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-nearby h4, .m-group h4 { margin: 6px 0 2px; font: 500 11px/1 var(--m-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-muted); }
.m-row {
    display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; width: 100%;
    padding: 11px 0; border: 0; border-top: 1px solid var(--m-line); background: none; color: var(--m-ink); text-align: start; cursor: pointer; font: inherit;
}
.m-row:first-of-type { border-top: 0; }
.m-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); margin-top: 7px; }
.m-row-t { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-row-p { font-size: 12px; color: var(--m-muted); margin-top: 2px; }
.m-row .m-ago { margin-top: 2px; }
.m-row.is-new .m-ago { color: var(--m-ink); }
.m-empty { color: var(--m-muted); font-size: 14px; padding: 12px 0; margin: 0; }

/* ---- Full-screen panels: feed, filters ---- */
.m-panel {
    position: fixed; left: 0; right: 0; top: 0; z-index: 2040;
    bottom: calc(var(--m-tab) + var(--m-safe-b));
    background: var(--m-bg); color: var(--m-ink); display: none; flex-direction: column;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.m-panel.is-on { display: flex; }
.m-ph { flex: none; padding: calc(var(--m-safe-t) + 14px) 16px 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.m-ph h2 { margin: 0; font-family: var(--m-display); font-weight: 700; font-size: 26px; letter-spacing: 0.03em; text-transform: uppercase; }
html[dir="rtl"] .m-ph h2 { font-family: inherit; font-size: 20px; text-transform: none; }
.m-count { font: 400 12px/1 var(--m-mono); color: var(--m-muted); }
.m-pb { flex: 1; overflow: auto; padding: 0 16px 24px; display: grid; gap: 14px; align-content: start; overscroll-behavior: contain; }
.m-group h4 { position: sticky; top: 0; background: var(--m-bg); padding: 8px 0 6px; margin: 0; }
.m-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.m-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 13px; border: 1px solid var(--m-line); border-radius: 999px; background: var(--m-surface); color: var(--m-muted); font: 500 13px/1 inherit; cursor: pointer; }
.m-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--m-muted)); box-shadow: 0 0 6px var(--c, transparent); }
.m-chip.is-on { color: var(--m-ink); border-color: var(--m-ink); background: var(--m-surface-2); }
.m-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--m-line); border-radius: 10px; overflow: hidden; background: var(--m-surface); }
.m-seg button { min-height: 40px; padding: 0 6px; border: 0; background: none; color: var(--m-muted); font: 500 12px/1 var(--m-mono); cursor: pointer; }
.m-seg button.is-on { background: var(--m-ink); color: var(--m-bg); }
.m-seg-sm { width: 156px; }
.m-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--m-line); }
.m-setting:first-of-type { border-top: 0; }
.m-l { display: grid; gap: 2px; font-size: 15px; }
.m-l small { color: var(--m-muted); font-size: 12px; }
.m-sw { flex: none; width: 46px; height: 28px; border-radius: 14px; border: 0; background: var(--m-line); position: relative; cursor: pointer; padding: 0; }
.m-sw::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--m-ink); transition: transform 0.15s; }
.m-sw.is-on { background: var(--m-ink); }
.m-sw.is-on::after { background: var(--m-bg); transform: translateX(18px); }
html[dir="rtl"] .m-sw.is-on::after { transform: translateX(-18px); }

.m-toast {
    position: fixed; left: 50%; bottom: calc(var(--m-tab) + var(--m-safe-b) + 16px); z-index: 2200;
    transform: translate(-50%, 10px); opacity: 0; pointer-events: none; transition: 0.2s;
    background: var(--m-ink); color: var(--m-bg); border-radius: 999px; padding: 9px 14px; font: 500 13px/1 inherit; white-space: nowrap;
}
.m-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
    .m-sheet, .m-toast, .m-sw::after { transition: none; }
    body.m-shell .geo-status-dot { animation: none; }
}
html[data-screenshot-mode="1"] .m-sheet, html[data-screenshot-mode="1"] .m-panel,
html[data-screenshot-mode="1"] .m-tabbar, html[data-screenshot-mode="1"] .m-timechip { display: none !important; }
}