:root { --bg: #f7f5f2; --panel: #ffffff; --ink: #1d1b19; --muted: #6f6a64; --line: #e7e2db; --accent: #b8412f; /* terracotta */ --accent-soft: #f3e3df; --been: #c0392b; /* red = been there */ --totry: #2e7d5b; /* green = haven't been */ --fav: #c0392b; /* red star = favorite */ --wish: #2e7d5b; /* green star = wishlist */ --michelin: #7a1f3d; /* burgundy badge */ --chip: #f0ece6; --shadow: 0 1px 3px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.06); --radius: 10px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Dark theme: variable overrides, applied via data-theme on . Auto-follows the system preference; the header 🌙/☀️ button overrides. */ :root[data-theme="dark"] { --bg: #171411; --panel: #211d18; --ink: #ebe6de; --muted: #a59d92; --line: #37312a; --accent: #e07a5f; --accent-soft: #3b2a23; --been: #e0604f; --totry: #4dab85; --fav: #e0604f; --wish: #4dab85; --michelin: #b04a68; --chip: #2c2721; --shadow: 0 1px 3px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35); } :root[data-theme="dark"] .leaflet-popup-content-wrapper, :root[data-theme="dark"] .leaflet-popup-tip { background: var(--panel); color: var(--ink); } :root[data-theme="dark"] .leaflet-bar a { background: var(--panel); color: var(--ink); border-color: var(--line); } :root[data-theme="dark"] .leaflet-control-attribution { background: rgba(33, 29, 24, .8); color: var(--muted); } :root[data-theme="dark"] select, :root[data-theme="dark"] input, :root[data-theme="dark"] textarea { background: var(--chip); color: var(--ink); border-color: var(--line); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } /* Use the DYNAMIC viewport height on mobile: iOS Safari's 100%/100vh doesn't account for the collapsing toolbars, so the app ends up taller than the screen and the whole PAGE scrolls behind it (which steals gestures meant for the list and lands them on the map). */ @supports (height: 100dvh) { html, body { height: 100dvh; } } body { display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.4; overflow: hidden; /* the app scrolls its panes, never the page */ overscroll-behavior: none; /* no rubber-banding / pull-to-refresh */ } /* ---------- Header ---------- */ header { display: flex; align-items: center; gap: 20px; padding: 12px 18px; background: var(--panel); border-bottom: 1px solid var(--line); z-index: 500; } header h1 { font-size: 17px; margin: 0; letter-spacing: -.2px; } header h1 .dot { color: var(--accent); } .stats { display: flex; gap: 16px; margin-left: auto; flex-wrap: wrap; } .stat { text-align: right; } .stat b { font-size: 16px; display: block; line-height: 1.1; } .stat span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; } .save-state { font-size: 11px; color: var(--muted); min-width: 90px; text-align: right; } .save-state.dirty { color: var(--accent); } /* ---------- Layout ---------- */ main { flex: 1; display: flex; min-height: 0; } #sidebar { width: var(--sidebar-w, 360px); flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 260px; } #listpane { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; } #map { flex: 1; min-width: 0; } /* Drag handles: #wresizer resizes sidebar width; #fresizer the filters/list split. */ #wresizer { flex: 0 0 6px; cursor: col-resize; background: var(--line); align-self: stretch; transition: background .15s; } #fresizer { flex: 0 0 6px; height: 6px; cursor: row-resize; background: var(--line); transition: background .15s; } #wresizer:hover, #fresizer:hover, #wresizer.drag, #fresizer.drag { background: var(--accent); } /* Wide sidebar: filters and the restaurant list sit side by side as columns. */ #sidebar.wide { flex-direction: row; } #sidebar.wide .filters { height: auto; max-height: none; flex: 0 0 var(--filters-w, 320px); border-right: 1px solid var(--line); border-bottom: none; } #sidebar.wide #fresizer { flex: 0 0 6px; width: 6px; height: auto; cursor: col-resize; } /* ---------- Filters ---------- */ .filters { padding: 14px 16px; border-bottom: 1px solid var(--line); overflow-y: auto; flex: 0 0 auto; height: var(--filters-h, 46%); } .addbox { display: flex; gap: 6px; } .addbox input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: var(--panel); } .addbox input:focus { outline: none; border-color: var(--accent); } .addbox button { padding: 0 14px; border: none; border-radius: 8px; cursor: pointer; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; } .addbox button:disabled { opacity: .5; cursor: default; } .addmsg { font-size: 11.5px; margin: 6px 0 2px; min-height: 14px; } .addmsg.ok { color: var(--been); } .addmsg.err { color: var(--accent); } .filters .search { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; background: var(--bg); } .filters .search:focus { outline: none; border-color: var(--accent); } .fgroup { margin-top: 14px; } .fgroup > label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 6px; font-weight: 600; } .seg { display: flex; flex-wrap: wrap; gap: 6px; } .seg button { border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 5px 10px; border-radius: 999px; cursor: pointer; font-size: 12.5px; } .seg button:hover { border-color: var(--accent); } .seg button.on { background: var(--accent); color: #fff; border-color: var(--accent); } .toggle-row { display: flex; gap: 8px; } .toggle-row button { flex: 1; } .toggle-row button.fav.on { background: var(--fav); border-color: var(--fav); color: #3a2c00; } .toggle-row button.wish.on { background: var(--wish); border-color: var(--wish); } /* multi-select cuisine checklist */ .cuisine-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 132px; overflow-y: auto; padding: 2px; } .cuisine-list .chip { border: 1px solid var(--line); background: var(--panel); padding: 4px 9px; border-radius: 999px; cursor: pointer; font-size: 12px; user-select: none; white-space: nowrap; } .cuisine-list .chip:hover { border-color: var(--accent); } .cuisine-list .chip.on { background: var(--accent); color: #fff; border-color: var(--accent); } /* borough subheading inside the neighborhood checklist */ .cuisine-list .nb-boro { flex: 0 0 100%; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; margin: 8px 0 1px; } .cuisine-list .nb-boro:first-child { margin-top: 0; } #neighborhood { max-height: 240px; } /* taller: borough groups make it longer */ #article { max-height: 300px; } /* taller: article-type groups make it longer */ .hint { font-size: 10.5px; color: var(--muted); margin-top: 6px; line-height: 1.35; } /* Section divider grouping related filter groups */ .fsection { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: var(--accent); font-weight: 700; margin: 18px 0 2px; padding-bottom: 4px; border-bottom: 1px solid var(--line); } .slider { width: 100%; margin: 4px 0 0; accent-color: var(--accent); cursor: pointer; } .article-select { width: 100%; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 12.5px; max-width: 100%; } .source-tags { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; } .source-tags .stag { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--chip); color: var(--muted); } .reset { margin-top: 12px; background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12.5px; padding: 0; } /* ---------- List ---------- */ .list-head { padding: 8px 16px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; } .list-head select { font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; background: var(--bg); } #list { flex: 1; overflow-y: auto; overscroll-behavior: contain; } .filters { overscroll-behavior: contain; } .row { padding: 10px 16px; border-bottom: 1px solid var(--line); cursor: pointer; display: flex; gap: 10px; } .row:hover { background: var(--accent-soft); } .row .swatch { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; } .row .body { flex: 1; min-width: 0; } .row .name { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 6px; } .row .meta { color: var(--muted); font-size: 12px; margin-top: 1px; } .row .quick { display: flex; gap: 6px; margin-top: 6px; } .row .quick button { font-size: 11px; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 3px 7px; cursor: pointer; color: var(--muted); } .row .quick button.on.fav { color: var(--fav); border-color: var(--fav); } .row .quick button.on.wish { color: var(--wish); border-color: var(--wish); } .row .quick button.on.been { color: var(--been); border-color: var(--been); } .stars { color: var(--accent); font-size: 12px; letter-spacing: -1px; } .grate { color: #a86b00; font-weight: 600; font-size: 12px; white-space: nowrap; } .grate small { color: var(--muted); font-weight: 400; } .price { color: var(--been); font-weight: 600; font-size: 12px; } .p-rating { margin: 2px 0 4px; font-size: 13px; } /* ---------- Marker + popup ---------- */ .pin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); } .pin.star, .pin.glyph { width: 0; height: 0; border-radius: 0; border: none; background: none !important; box-shadow: none; line-height: 1; text-shadow: 0 0 2px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.45); } .pin.star { font-size: 19px; } .pin.glyph { font-size: 17px; } .pin.emoji { width: 0; height: 0; border-radius: 0; border: none; background: none !important; box-shadow: none; font-size: 15px; line-height: 1; } /* Bigger, easier-to-tap markers on touch screens (matches the JS iconSize bump). .pin.star/.glyph/.emoji keep width/height:0 via higher specificity; only the circle .pin grows, plus the glyph font sizes. */ @media (pointer: coarse) { .pin { width: 22px; height: 22px; } .pin.star { font-size: 27px; } .pin.glyph { font-size: 24px; } .pin.emoji { font-size: 21px; } } .michelin-badge { display: inline-block; background: var(--michelin); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .3px; padding: 1px 5px; border-radius: 4px; vertical-align: middle; } .bib-badge { display: inline-block; background: #c8641e; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .3px; padding: 1px 5px; border-radius: 4px; vertical-align: middle; } /* Make the popup clearly belong to ONE dot: a bigger pointer aimed at the anchor, plus a pulsing ring drawn on the marker itself (see highlight()). */ .leaflet-popup-tip-container { width: 26px; height: 14px; margin-top: -1px; } .leaflet-popup-tip { width: 14px; height: 14px; padding: 1px; margin: -8px auto 0; box-shadow: 0 3px 8px rgba(0, 0, 0, .18); } .leaflet-popup-content-wrapper { border: 1px solid var(--line); } .halo { animation: haloPulse 1.6s ease-out infinite; transform-origin: center; } @keyframes haloPulse { 0% { stroke-opacity: .95; stroke-width: 3; } 70% { stroke-opacity: .25; stroke-width: 7; } 100% { stroke-opacity: .95; stroke-width: 3; } } @media (prefers-reduced-motion: reduce) { .halo { animation: none; } } .p-hours { display: flex; align-items: center; gap: 8px; margin: 5px 0 2px; font-size: 12px; } .oh-dot { font-weight: 700; } .oh-dot.open { color: var(--totry); } .oh-dot.shut { color: var(--been); } .oh-times { color: var(--muted); } .popup h3 { margin: 0 0 2px; font-size: 15px; } .popup .p-meta { color: var(--muted); font-size: 12px; margin-bottom: 8px; } .popup .p-actions { display: flex; gap: 6px; margin: 8px 0; } .popup .p-actions button { flex: 1; border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 5px; cursor: pointer; font-size: 12px; } .popup .p-actions button.on.fav { background: var(--fav); color:#3a2c00; border-color: var(--fav); } .popup .p-actions button.on.wish { background: var(--wish); color:#fff; border-color: var(--wish); } .popup .p-actions button.on.been { background: var(--been); color:#fff; border-color: var(--been); } .popup .p-links a { font-size: 12px; color: var(--accent); text-decoration: none; margin-right: 10px; } .popup .p-links a:hover { text-decoration: underline; } .popup .p-closed { color: var(--accent); font-weight: 700; font-size: 12px; margin: 4px 0; } .popup .p-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 2px; } .popup .p-tags .ptag { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; } .popup .p-desc { font-size: 12.5px; color: var(--ink); margin: 6px 0; line-height: 1.45; } .popup .p-ratings { display: flex; gap: 14px; margin: 6px 0; font-size: 12.5px; } .popup .p-ratings .r-val { font-weight: 700; } .popup .p-ratings .r-lab { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; display: block; } .popup .p-ratings .muted { color: var(--muted); font-weight: 400; } .popup .p-src { font-size: 11px; color: var(--muted); margin-top: 8px; } .popup .p-mentions { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 6px; } .popup .p-mentions .m-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 3px; } .popup .p-mentions a { display: block; font-size: 12px; color: var(--accent); text-decoration: none; margin: 2px 0; } .popup .p-mentions a:hover { text-decoration: underline; } .popup .p-mentions .src-tag { color: var(--muted); font-size: 10.5px; } .popup { max-height: 60vh; overflow-y: auto; } /* ---------- Legend ---------- */ .legend { position: absolute; bottom: 14px; right: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px; box-shadow: var(--shadow); z-index: 500; } .legend div { display: flex; align-items: center; gap: 6px; margin: 2px 0; } .legend .swatch { width: 11px; height: 11px; border-radius: 50%; } .empty { padding: 30px 16px; text-align: center; color: var(--muted); } .muted { color: var(--muted); font-weight: 400; font-size: 11px; } /* ---------- Auth ---------- */ .authbox { display: flex; align-items: center; gap: 10px; min-width: 0; } .authbox #authWho { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; } .authbox #signOut { font-size: 12px; padding: 4px 10px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; cursor: pointer; color: var(--ink); } .authbox #signOut:hover { border-color: var(--accent); color: var(--accent); } #loginGate { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: var(--bg); } .login-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px 40px; max-width: 380px; text-align: center; } .login-card h1 { font-size: 22px; margin: 0 0 8px; letter-spacing: -.3px; } .login-card h1 .dot { color: var(--accent); } .login-card p { color: var(--muted); margin: 0 0 22px; } .gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 16px; font-size: 14px; font-weight: 600; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); cursor: pointer; } .gbtn:hover { border-color: var(--accent); box-shadow: var(--shadow); } .login-err { color: var(--been); font-size: 12px; margin-top: 12px; min-height: 14px; } /* ---------- Inheritance modal ---------- */ .inherit-link { display: block; width: 100%; margin-top: 8px; padding: 8px; border: 1px dashed var(--line); background: none; border-radius: 8px; color: var(--accent); cursor: pointer; font-size: 13px; } .inherit-link:hover { border-color: var(--accent); background: var(--accent-soft); } .modal { position: fixed; inset: 0; z-index: 3000; padding: 20px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); } .modal-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; max-width: 440px; padding: 26px 28px; max-height: 88vh; overflow: auto; } .modal-card h2 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.2px; } .modal-sub { color: var(--muted); margin: 0 0 16px; font-size: 13px; } .modal-group { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; margin: 16px 0 8px; } .modal-opt { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; cursor: pointer; } .modal-opt:hover { border-color: var(--accent); } .modal-opt > span:first-of-type { flex: 1; } .modal-count { color: var(--muted); font-size: 12px; } .modal-err { color: var(--been); font-size: 12px; min-height: 14px; margin-top: 10px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; } .btn-ghost { padding: 8px 14px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; cursor: pointer; color: var(--ink); font-size: 13px; } .btn-ghost:hover { border-color: var(--accent); } .btn-primary { padding: 8px 16px; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; } .btn-primary:disabled { opacity: .6; cursor: default; } /* ---------- Personal rating + notes (popup) ---------- */ .p-rate { display: flex; align-items: center; gap: 2px; margin: 8px 0 2px; } .p-rate .rstar { font-size: 20px; line-height: 1; cursor: pointer; color: #d8d2c9; transition: color .1s; user-select: none; } .p-rate .rstar.on { color: #e8a413; } .p-rate .rstar:hover { color: #e8a413; } .p-rate .rate-lab { font-size: 11px; color: var(--muted); margin-left: 6px; } .p-notes { width: 100%; margin: 6px 0 2px; padding: 7px 9px; font: inherit; font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; min-height: 34px; max-height: 120px; background: var(--chip); color: var(--ink); } .p-notes:focus { outline: none; border-color: var(--accent); } .myrate { color: #e8a413; font-size: 12px; font-weight: 700; } .notedot { font-size: 11px; cursor: default; } /* Price chips: single wrapping row, no tall scroll box */ .chips-row { max-height: none; display: flex; flex-wrap: wrap; gap: 4px; } /* Discover presets: one-tap views */ .preset-row { display: flex; flex-wrap: wrap; gap: 5px; } .preset-row .chip.preset { font-size: 12px; padding: 5px 10px; border-radius: 16px; } .open-when { display: flex; gap: 5px; margin-top: 5px; } .open-when select { flex: 1; min-width: 0; padding: 6px 8px; font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); } /* "Near" (distance) filter */ .near-row { display: flex; gap: 5px; } .near-row button { flex: 1; padding: 6px 8px; font-size: 12px; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); white-space: nowrap; } .near-row button:hover { border-color: var(--accent); color: var(--accent); } .near-row button.on { background: var(--accent); color: #fff; border-color: var(--accent); } .near-select { width: 100%; margin-top: 5px; padding: 6px 8px; font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); } /* Rank badge on the Sought-after leaderboard */ .rank { display: inline-block; min-width: 20px; text-align: center; margin-right: 4px; background: var(--accent-soft); color: var(--accent); border-radius: 6px; font-size: 10.5px; font-weight: 800; padding: 1px 4px; vertical-align: 1px; } /* Empty state reset */ .empty-reset { margin-top: 10px; padding: 7px 14px; border: 1px solid var(--accent); background: var(--panel); color: var(--accent); border-radius: 8px; cursor: pointer; font-size: 13px; } .empty-reset:hover { background: var(--accent-soft); } /* Near-me map button */ .leaflet-bar a.nearme { font-size: 15px; line-height: 26px; } /* Header theme toggle */ #themeToggle { font-size: 15px; line-height: 1; padding: 5px 9px; cursor: pointer; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; } #themeToggle:hover { border-color: var(--accent); } /* Popup "why it's hot" line */ .p-buzz { font-size: 12px; color: var(--accent); font-weight: 600; margin: 4px 0 2px; } .book-times .to-sep { font-size: 11px; color: var(--muted); } .bk-slots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .bk-slots .slot { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); text-decoration: none; } .bk-checking { margin-top: 4px; } /* Quick-jump palette (⌘K) */ .modal.qk { align-items: flex-start; padding-top: 12vh; } .qk-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); width: 100%; max-width: 520px; overflow: hidden; } .qk-input { width: 100%; border: none; outline: none; padding: 15px 18px; font-size: 16px; background: var(--panel); color: var(--ink); border-bottom: 1px solid var(--line); } .qk-results { max-height: 46vh; overflow-y: auto; } .qk-row { display: flex; flex-direction: column; gap: 1px; padding: 9px 18px; cursor: pointer; } .qk-row b { font-size: 14px; } .qk-row span { font-size: 12px; color: var(--muted); } .qk-row.sel, .qk-row:hover { background: var(--accent-soft); } .qk-none { padding: 14px 18px; color: var(--muted); font-size: 13px; } .qk-hint { padding: 7px 18px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); } /* Open/closed badge on list rows */ .ob { font-weight: 700; font-size: 11px; margin-right: 6px; white-space: nowrap; } .ob.open { color: #2e7d5b; } .ob.soon { color: #d97706; } .ob.shut { color: var(--muted); font-weight: 600; } /* Quick bar above the list (shown on phones — see the media query) */ #quickbar { display: none; } #quickbar input { flex: 1; min-width: 0; padding: 9px 12px; font-size: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); } #quickbar input:focus { outline: none; border-color: var(--accent); } #qNear { flex: 0 0 auto; padding: 8px 12px; font-size: 13px; font-weight: 600; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--panel); color: var(--ink); white-space: nowrap; } #qNear.on { background: var(--accent); border-color: var(--accent); color: #fff; } /* Active-filter chips above the list: why the list is short, at a glance */ #activeChips { display: none; flex-wrap: wrap; gap: 6px; padding: 6px 14px 2px; align-items: center; } .achip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; cursor: pointer; user-select: none; background: var(--accent-soft); color: var(--accent); border: 1px solid transparent; } .achip b { font-weight: 700; opacity: .65; } .achip:hover { border-color: var(--accent); } .achip.aclear { background: none; border: 1px solid var(--line); color: var(--muted); } /* Drawer "Show N places" button (phones only — see the media query) */ .filter-done { display: none; } /* Infinite-scroll sentinel */ .list-sentinel { padding: 14px; text-align: center; font-size: 12px; color: var(--muted); } /* Mobile bottom sheet — the phone's detail card (replaces the map popup) */ #sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300; background: var(--panel); border-radius: 16px 16px 0 0; border: 1px solid var(--line); border-bottom: none; box-shadow: 0 -8px 30px rgba(0, 0, 0, .28); transform: translateY(105%); transition: transform .25s ease; max-height: 62vh; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); } #sheet.show { transform: translateY(0); } .sheet-grab { flex: 0 0 auto; display: flex; justify-content: center; padding: 10px 0 6px; } .sheet-grab span { width: 42px; height: 4px; border-radius: 2px; background: var(--line); } .sheet-x { position: absolute; top: 6px; right: 8px; z-index: 1; border: none; background: none; font-size: 16px; color: var(--muted); padding: 8px 10px; cursor: pointer; } .sheet-body { overflow-y: auto; padding: 0 16px 16px; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .sheet-body .p-actions button { padding: 9px 6px; font-size: 13px; } /* Prominent walking-directions link in the detail card */ .popup .p-links a.p-dir { display: inline-block; padding: 6px 12px; margin: 2px 8px 2px 0; background: var(--accent); color: #fff !important; border-radius: 8px; font-weight: 700; } .popup .p-links a.p-dir:hover { text-decoration: none; opacity: .92; } /* Mobile filter-drawer toggle (hidden on desktop) */ #navToggle { display: none; align-items: center; justify-content: center; font-size: 18px; line-height: 1; padding: 5px 11px; margin-right: 2px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; } #navToggle:hover { border-color: var(--accent); color: var(--accent); } #navToggle { position: relative; } #navToggle[data-n]:not([data-n=""])::after { content: attr(data-n); position: absolute; top: -6px; right: -7px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 9px; } #mobiletabs { display: none; } /* mobile only — see the media query */ #backdrop { display: none; position: absolute; inset: 0; z-index: 900; background: rgba(0, 0, 0, .35); } @media (max-width: 780px) { /* Header must fit the screen exactly — body is overflow:hidden, so anything wider gets clipped (which is what cut off the account email). Give the account block the leftover space and let it truncate, drop the transient save-state, and respect the notch/rounded-corner insets. */ header { gap: 8px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); flex-wrap: nowrap; } header h1 { font-size: 15px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stats { display: none; } /* reclaim header space on phones */ .save-state { display: none; } /* transient; the app still autosaves */ #navToggle { display: inline-flex; flex: 0 0 auto; } #themeToggle { flex: 0 0 auto; } .authbox { margin-left: auto; flex: 0 1 auto; gap: 6px; } .authbox #authWho { max-width: 34vw; font-size: 11.5px; } .authbox #signOut { flex: 0 0 auto; padding: 4px 8px; font-size: 11.5px; } /* Mobile is a two-view app: a full-screen LIST or a full-screen MAP, chosen by the bottom tab bar. The ☰ button opens the filters as an overlay on top of either view. #sidebar is only a positioning shell here — its children are placed independently so filters can float above the map. */ main { position: relative; } #map { position: absolute; inset: 0; width: 100%; height: auto; z-index: 0; } #wresizer, #fresizer { display: none; } #sidebar { position: absolute; inset: 0; width: auto !important; height: auto !important; min-width: 0; border-right: none; background: none; display: block !important; pointer-events: none; /* children opt back in */ } /* Filters: slide-in overlay above both views. */ .filters { position: absolute; top: 0; left: 0; bottom: 0; z-index: 1100; width: min(88%, 360px); height: auto !important; max-height: none !important; padding-bottom: 76px; /* clear the tab bar */ background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transform: translateX(-100%); transition: transform .25s ease; pointer-events: auto; box-shadow: var(--shadow); } .filters.open { transform: translateX(0); } /* List view: full-screen pane over the map. */ #listpane { position: absolute; inset: 0; z-index: 1000; background: var(--panel); display: none; pointer-events: auto; flex-direction: column; padding-bottom: 52px; /* clear the tab bar */ } body[data-view="list"] #listpane { display: flex; } #list { flex: 1; overflow-y: auto; overscroll-behavior: contain; } #quickbar { display: flex; gap: 8px; padding: 10px 12px 4px; align-items: center; } /* Sticky apply button pinned to the bottom of the filter drawer */ .filter-done { display: block; position: sticky; bottom: 0; width: 100%; margin-top: 10px; padding: 13px; background: var(--accent); color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 -6px 14px rgba(0, 0, 0, .12); } #backdrop.show { display: block; z-index: 1050; } /* Bottom tab bar: List / Map */ #mobiletabs { display: flex; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1200; background: var(--panel); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } #mobiletabs button { flex: 1; padding: 11px 8px; font-size: 13px; font-weight: 600; background: none; border: none; color: var(--muted); cursor: pointer; } #mobiletabs button.on { color: var(--accent); } .login-card { margin: 0 20px; padding: 30px 26px; } }