* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 14px/1.4 system-ui, -apple-system, sans-serif; color: #1d2b24; background: #f4f6f3; }
body { display: flex; flex-direction: column; }
#controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 10px 16px; background: #fff; border-bottom: 1px solid #dde3dc; }
#controls .brand { font-size: 16px; }
#controls input[type=date], #place { padding: 4px 6px; border: 1px solid #c8d0c6; border-radius: 6px; }
#modes { border: 0; margin: 0; padding: 0; display: flex; gap: 10px; }
#search, #search-all, #ask-button { padding: 6px 14px; border: 0; border-radius: 6px; background: #2f6f4e; color: #fff; cursor: pointer; }
#search:disabled, #search-all:disabled, #ask-button:disabled { opacity: .5; cursor: wait; }
#notices { padding: 0 16px; }
.notice { margin: 6px 0; padding: 6px 10px; border-radius: 6px; background: #fff4d6; border: 1px solid #f0d58a; }
main { flex: 1; display: flex; min-height: 0; }
#sidebar { width: 360px; overflow-y: auto; background: #fff; border-right: 1px solid #dde3dc; }
#sidebar section { padding: 8px 12px; border-bottom: 1px solid #eef1ed; }
#sidebar h2 { margin: 4px 0 8px; font-size: 15px; }
#sidebar ul { list-style: none; margin: 0; padding: 0; }
#sidebar li { padding: 6px 8px; border-radius: 6px; cursor: pointer; }
#sidebar li:hover, #sidebar li.active { background: #e7f1ea; }
#sidebar li.selected { outline: 2px solid #2f6f4e; }
#sidebar .list-note { color: #5d6b63; font-size: 12px; margin: -4px 0 6px; }
#sidebar .list-note:empty { display: none; }
.load-more { width: 100%; margin-top: 8px; }
#sidebar li .meta { color: #5d6b63; font-size: 12px; }
.badge { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 10px; background: #e3efe7; margin-top: 2px; }
.badge.garden_unconfirmed { background: #fff0cf; }
#map-wrap { flex: 1; position: relative; display: flex; }
#map { flex: 1; }
#nature-hint { top: 52px; }
#draw-hint, #nature-hint { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1000; padding: 6px 14px; border-radius: 16px; background: #1d2b24; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); pointer-events: none; }
.draw-group { display: inline-flex; gap: 6px; align-items: center; }
.tool-btn.active { background: #2f6f4e; color: #fff; border-color: #2f6f4e; }
.pin { background: none; border: 0; }
.pin span { font-size: 22px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.pin b { display: block; margin-top: -4px; padding: 0 4px; border-radius: 4px; font-size: 11px; color: #fff; white-space: nowrap; }
.pin.airbnb b { background: #e0565b; }
.pin.booking b { background: #1f4fa3; }
.popup img { width: 100%; max-height: 120px; object-fit: cover; border-radius: 4px; }
#ask { padding: 8px 16px; background: #fff; border-top: 1px solid #dde3dc; }
#ask-form { display: flex; gap: 8px; }
#ask-input { flex: 1; padding: 6px 8px; border: 1px solid #c8d0c6; border-radius: 6px; }
#ask-status { color: #5d6b63; font-size: 12px; min-height: 16px; }
#ask-answer { white-space: pre-wrap; max-height: 120px; overflow-y: auto; }
.tool-btn { padding: 5px 10px; border: 1px solid #c8d0c6; border-radius: 6px; background: #fff; cursor: pointer; }
.tool-btn:disabled { opacity: .5; cursor: default; }
.tool-btn .count { margin-left: 4px; padding: 0 6px; border-radius: 10px; background: #2f6f4e; color: #fff; font-size: 12px; }
.filters-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; border: 0; border-radius: 10px; padding: 0; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.filters-dialog::backdrop { background: rgba(20, 30, 25, .45); }
.filters-dialog form { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.filters-dialog h2 { margin: 0; font-size: 17px; }
.filters-dialog .shared { display: flex; flex-wrap: wrap; gap: 8px 14px; border: 1px solid #dde3dc; border-radius: 8px; }
.filters-dialog .fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 16px; }
.filters-dialog .field-head { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; font-weight: 600; }
.filters-dialog .chips { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.filters-dialog .chip { font-weight: normal; }
.filters-dialog .range-row { display: flex; gap: 6px; align-items: center; }
.filters-dialog input[type=number] { width: 90px; padding: 3px 6px; border: 1px solid #c8d0c6; border-radius: 6px; }
.filters-dialog select { padding: 3px 6px; border: 1px solid #c8d0c6; border-radius: 6px; }
.filters-dialog .invalid, .filters-dialog .chips.invalid { outline: 2px solid #c0392b; }
.filters-dialog .form-error { margin: 0; min-height: 18px; color: #c0392b; }
.filters-dialog .dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.filters-dialog .dialog-buttons button { padding: 6px 14px; border: 1px solid #c8d0c6; border-radius: 6px; background: #fff; cursor: pointer; }
.filters-dialog .dialog-buttons .primary { border: 0; background: #2f6f4e; color: #fff; }
.filters-dialog .dialog-buttons .primary:disabled { opacity: .5; cursor: not-allowed; }
.src-tag { font-size: 10px; font-weight: normal; padding: 0 5px; border-radius: 8px; background: #eef1ed; color: #5d6b63; margin-left: 4px; }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid #c8d0c6; border-top-color: #2f6f4e; border-radius: 50%; vertical-align: middle; animation: spin .8s linear infinite; }
.spinner[hidden], .load-chip[hidden], .link-btn[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.spinner { animation: none; width: auto; height: auto; border: 0; border-radius: 0; }
.spinner::before { content: "β¦"; }
}
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chips-row:empty { display: none; }
.load-chip { font-size: 12px; padding: 1px 8px; border-radius: 10px; background: #eef1ed; color: #5d6b63; }
.link-btn { border: 0; background: none; padding: 0; color: #1f4fa3; text-decoration: underline; cursor: pointer; font: inherit; font-size: 12px; }
.goto { display: inline-flex; gap: 4px; align-items: center; }
#goto-input { padding: 4px 6px; border: 1px solid #c8d0c6; border-radius: 6px; width: 210px; }
#suggest-trips { padding: 6px 14px; border: 0; border-radius: 6px; background: #b5562f; color: #fff; cursor: pointer; }
#suggest-trips:disabled { opacity: .5; cursor: wait; }
.add-trip, .save-combo { margin-left: 6px; font-size: 12px; }
.open-link { margin-left: 10px; font-size: 12px; color: #2f6f4e; text-decoration: none; }
.open-link:hover, .open-link:focus { text-decoration: underline; }
.trip-menu { position: fixed; z-index: 2000; min-width: 200px; max-width: 260px; max-height: 50vh; overflow-y: auto; padding: 4px; background: #fff; border: 1px solid #dde3dc; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.trip-menu button { display: block; width: 100%; text-align: left; padding: 6px 10px; border: 0; border-radius: 6px; background: none; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-menu button:hover, .trip-menu button:focus { background: #e7f1ea; }
.trips-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 1px solid #dde3dc; border-radius: 10px; padding: 12px 16px; }
.trips-dialog::backdrop { background: rgba(0,0,0,.35); }
.trips-dialog .dlg-head { display: flex; justify-content: space-between; align-items: center; }
.trips-dialog h2 { margin: 0; font-size: 16px; }
.trips-dialog h3 { margin: 12px 0 4px; font-size: 14px; }
.trips-list, .trip-items { list-style: none; margin: 8px 0; padding: 0; }
.trips-list li { padding: 8px; border-radius: 6px; cursor: pointer; }
.trips-list li:hover, .trips-list li:focus { background: #e7f1ea; outline: none; }
.trips-list .meta { color: #5d6b63; font-size: 12px; }
.trip-items li { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid #eef1ed; }
.trip-items .item-tools { white-space: nowrap; }
#trip-editor label.wide { display: block; margin: 8px 0; }
#trip-editor label.wide input, #trip-editor textarea { display: block; width: 100%; margin-top: 2px; padding: 5px 7px; border: 1px solid #c8d0c6; border-radius: 6px; font: inherit; }
#trip-editor .row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
#trip-guests { width: 4em; }
#trip-editor .airbnb-add { flex-wrap: nowrap; }
#trip-editor .section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 12px 0 4px; }
#trip-editor .section-head h3 { margin: 0; }
#trip-airbnb-url { flex: 1; min-width: 0; padding: 5px 7px; border: 1px solid #c8d0c6; border-radius: 6px; font: inherit; }
.trip-items .price-edit { white-space: nowrap; font-size: 12px; color: #5d6b63; }
.trip-items .price-edit input { width: 6em; margin-left: 2px; }
.trip-items .price-edit input.invalid { border: 1px solid #a8322d; background: #fdecea; }
.dlg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dlg-actions .primary { padding: 6px 14px; border: 0; border-radius: 6px; background: #2f6f4e; color: #fff; cursor: pointer; }
.tool-btn.danger { color: #a8322d; border-color: #e3b5b2; }
#nature-chips { position: absolute; top: 64px; right: 10px; z-index: 1000; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
#nature-chips[hidden], #nature-hint[hidden] { display: none; }
#nature-chips > * { pointer-events: auto; }
.nature-chip { padding: 3px 10px; border: 1px solid #c8d0c6; border-radius: 14px; background: #fff; color: #5d6b63; font: inherit; font-size: 12px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.nature-chip[aria-pressed="true"] { background: #2f6f4e; border-color: #2f6f4e; color: #fff; }
#nature-chips .load-chip { box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.pin.sight span { font-size: 18px; }
.pin.trip-sight span { font-size: 20px; filter: drop-shadow(0 0 3px #2f6f4e) drop-shadow(0 0 2px #2f6f4e); }
.popup .sight-kind { color: #5d6b63; }
/* hike tracks of a shown trip (app.js drawRoute) */
.route-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); vertical-align: 0; flex: none; }
.route-start { background: none; border: 0; }
.route-start span { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; box-sizing: border-box; color: #fff; font-size: 8px; line-height: 1; padding-left: 1px; box-shadow: 0 1px 3px rgba(0,0,0,.45); }
.route-end { background: none; border: 0; font-size: 18px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.popup .sight-links a { margin-right: 8px; }
.popup .osm-credit { display: block; margin-top: 4px; color: #5d6b63; font-size: 11px; }
.auth-area { margin-left: auto; white-space: nowrap; }
.auth-area [hidden] { display: none; }
.auth-area .link-btn { font-size: 14px; }
.auth-dialog { width: min(360px, calc(100vw - 32px)); border: 1px solid #dde3dc; border-radius: 10px; padding: 12px 16px; }
.auth-dialog::backdrop { background: rgba(0,0,0,.35); }
.auth-dialog .dlg-head { display: flex; justify-content: space-between; align-items: center; }
.auth-dialog h2 { margin: 0; font-size: 16px; }
.auth-form label { display: block; margin: 8px 0; }
.auth-form label[hidden], .auth-form[hidden] { display: none; }
.auth-form input { display: block; width: 100%; margin-top: 2px; padding: 5px 7px; border: 1px solid #c8d0c6; border-radius: 6px; font: inherit; }
.auth-tabs { display: flex; gap: 4px; margin: 10px 0 4px; border-bottom: 1px solid #dde3dc; }
.auth-tabs button { padding: 5px 12px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; cursor: pointer; color: #5d6b63; }
.auth-tabs button[aria-selected="true"] { border-bottom-color: #2f6f4e; color: #1d2b24; font-weight: 600; }
.auth-dialog .form-error, .auth-form .form-error { margin: 4px 0 0; min-height: 18px; color: #a8322d; }
.auth-form .dlg-actions .primary:disabled { opacity: .5; cursor: not-allowed; }
/* emoji picker (sign-up tab and the Change emoji dialog): 40 px buttons that wrap, taken ones greyed out */
.auth-area .name-btn { color: inherit; text-decoration: none; border-bottom: 1px dashed #8a968f; }
.emoji-row { margin: 8px 0; }
.emoji-row[hidden], .emoji-dialog [hidden] { display: none; }
.emoji-label { margin-bottom: 4px; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; max-height: 232px;
overflow-y: auto; padding: 2px; }
.emoji-btn { height: 40px; min-width: 40px; padding: 0; border: 1px solid #dde3dc; border-radius: 8px; background: #fff;
font-size: 22px; line-height: 1; cursor: pointer; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
@media (hover: hover) { .emoji-btn:hover { background: #eef5f0; } }
.emoji-btn { -webkit-tap-highlight-color: transparent; }
.emoji-btn[aria-pressed="true"] { border: 2px solid #2f6f4e; background: #dcefe3; }
.emoji-btn[aria-disabled="true"] { opacity: .3; filter: grayscale(1); background: #f2f2f2; cursor: not-allowed; }
.emoji-grid[aria-busy="true"] { opacity: .6; pointer-events: none; }
.emoji-dialog { width: min(440px, calc(100vw - 32px)); }
.emoji-dialog .list-note { margin: 6px 0 8px; color: #5d6b63; font-size: 13px; }
#trip-created-by { margin: -4px 0 4px; color: #5d6b63; font-size: 12px; }
#trip-round { margin: -2px 0 4px; font-size: 12px; }
#trip-round[hidden] { display: none; }
#vote-btn.has-left::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: #c0392b; vertical-align: middle; }
.vote-dialog { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 1px solid #dde3dc; border-radius: 10px; padding: 12px 16px; }
.vote-dialog::backdrop { background: rgba(0,0,0,.35); }
.vote-dialog [hidden] { display: none; }
.vote-dialog .dlg-head { display: flex; justify-content: space-between; align-items: center; }
.vote-dialog h2 { margin: 0; font-size: 16px; }
.vote-dialog h3 { margin: 10px 0 4px; font-size: 15px; }
.vote-dialog .meta, .vote-dialog .list-note { color: #5d6b63; font-size: 12px; }
/* Moved your Loveβ¦: floats at the bottom of the screen whatever the dialog's scroll, never takes a tap */
.vote-toast { position: fixed; left: 50%; bottom: 24px; z-index: 20; transform: translateX(-50%); width: max-content;
max-width: min(480px, calc(100vw - 32px)); margin: 0; padding: 10px 14px; border-radius: 10px; background: #1d2b24; color: #fff;
box-shadow: 0 6px 20px rgba(0,0,0,.28); font-size: 14px; text-align: center; pointer-events: none; overflow-wrap: anywhere; }
.vote-toast[hidden] { display: none; }
.vote-banner { margin: 8px 0; padding: 10px 12px; border-radius: 8px; background: #fff4d6; border: 1px solid #f0d58a; font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vote-status > div { margin: 2px 0; }
.vote-tools { margin: 6px 0; }
.vote-tools .dlg-actions { margin-top: 4px; }
.vote-panel { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 8px; padding: 8px; border: 1px solid #dde3dc; border-radius: 8px; }
.vote-trips, .vote-stays, .vote-history { list-style: none; margin: 8px 0; padding: 0; }
.vote-trip { padding: 8px; border-bottom: 1px solid #eef1ed; border-radius: 6px; }
.vote-trip.focus { background: #e7f1ea; }
.vote-stays { margin: 6px 0 0 16px; }
.vote-stay { padding: 6px 0; border-top: 1px dashed #dde3dc; }
.vote-score { color: #5d6b63; }
.vote-counts { display: flex; gap: 6px; margin: 4px 0; }
.count-btn { padding: 1px 6px; border: 1px solid #dde3dc; border-radius: 10px; background: #f4f6f3; font: inherit; font-size: 12px; cursor: pointer; }
.vote-names { font-size: 12px; color: #5d6b63; margin: 2px 0 4px; }
.vote-nogo { color: #a8322d; font-size: 13px; margin: 2px 0; }
.vote-buttons { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.vote-btn-rate { padding: 4px 10px; border: 1px solid #c8d0c6; border-radius: 14px; background: #fff; font: inherit; cursor: pointer; }
.vote-btn-rate[aria-pressed="true"] { background: #2f6f4e; border-color: #2f6f4e; color: #fff; }
.vote-btn-rate:disabled { opacity: .5; cursor: default; }
.vote-comment { flex: 1; min-width: 160px; padding: 4px 7px; border: 1px solid #c8d0c6; border-radius: 6px; font: inherit; }
.vote-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.vote-check { display: block; margin: 2px 0; }
.vote-start label.wide { display: block; margin: 8px 0; }
.vote-start label.wide input { display: block; width: 100%; margin-top: 2px; padding: 5px 7px; border: 1px solid #c8d0c6; border-radius: 6px; font: inherit; }
.vote-start fieldset { border: 1px solid #dde3dc; border-radius: 8px; max-height: 30vh; overflow-y: auto; }
.vote-dialog .dlg-actions .primary:disabled { opacity: .5; cursor: default; }
.vote-panel .primary { padding: 5px 12px; border: 0; border-radius: 6px; background: #2f6f4e; color: #fff; cursor: pointer; }
/* π vote overview: the Vote / Overview tabs and the who-voted-what grid (scrolls sideways inside its own box, the
trip column pinned) */
.vote-tabs { display: flex; gap: 4px; margin: 6px 0 4px; border-bottom: 1px solid #dde3dc; }
.vote-tabs button { padding: 6px 12px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; color: #5d6b63; cursor: pointer; }
.vote-tabs button[aria-selected="true"] { color: #1d2b24; font-weight: 600; border-bottom-color: #2f6f4e; }
.ov-winner { font-weight: 600; }
.ov-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; margin: 8px 0; border: 1px solid #eef1ed; border-radius: 8px; }
.ov-grid { border-collapse: separate; border-spacing: 0; font-size: 14px; }
.ov-grid th, .ov-grid td { padding: 4px 6px; border-bottom: 1px solid #eef1ed; text-align: center; vertical-align: middle; background: #fff; }
.ov-grid .ov-name { position: sticky; left: 0; z-index: 1; min-width: 160px; max-width: 260px; text-align: left; font-weight: normal;
overflow-wrap: anywhere; border-right: 1px solid #dde3dc; }
.ov-grid .ov-corner { color: #5d6b63; font-size: 12px; font-weight: 600; }
.ov-grid .ov-stay { padding-left: 18px; font-size: 13px; color: #3c4a42; }
.ov-trip-row > * { border-top: 1px solid #dde3dc; }
.ov-rank { color: #5d6b63; }
.ov-trip { font-size: 14px; font-weight: 600; text-align: left; overflow-wrap: anywhere; }
.ov-more { font-size: 13px; }
.ov-person { min-width: 44px; font-weight: normal; }
.ov-emoji { display: block; font-size: 20px; line-height: 1.2; }
.ov-pname { display: block; max-width: 72px; margin: 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #5d6b63; }
.ov-pending .ov-emoji { opacity: .55; }
.ov-grid .me { background: #eef6f0; }
.ov-cell { min-width: 40px; height: 36px; font-size: 18px; }
.ov-grid td.nogo { background: #fbe3e1; }
.ov-grid td.me.nogo { background: #f5d3cf; }
.ov-none { color: #9aa79f; }
.ov-cell-btn { position: relative; min-width: 36px; min-height: 32px; padding: 0 4px; border: 0; background: none; font: inherit; cursor: pointer; }
.ov-dot { position: absolute; top: 2px; right: 0; width: 7px; height: 7px; border-radius: 50%; background: #2f6f4e; }
.ov-grid .ov-score { font-weight: 600; white-space: nowrap; border-left: 1px solid #dde3dc; }
.ov-warn { color: #a8322d; }
.ov-pop { position: fixed; z-index: 10; max-width: min(320px, calc(100vw - 16px)); padding: 8px 10px; border: 1px solid #c8d0c6; border-radius: 8px;
background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.18); font-size: 14px; overflow-wrap: anywhere; }
/* π share link (Vote dialog) and the π invite screen right after Start a round */
.vote-share { margin: 6px 0; }
.share-out { margin-top: 6px; }
.share-msg { margin-bottom: 4px; color: #2f6f4e; font-weight: 600; }
.share-url, #vote-invite-url { display: block; width: 100%; padding: 8px 10px; border: 1px solid #c8d0c6; border-radius: 8px; background: #f7f9f6;
font: inherit; font-size: 14px; color: #1d2b24; }
.vote-invite { max-width: 460px; margin: 0 auto; padding: 8px 0 4px; text-align: center; }
.invite-hero { font-size: 48px; line-height: 1.1; }
.vote-dialog h3.invite-title { margin: 6px 0 4px; font-size: 20px; }
.invite-round { margin: 0 0 14px; color: #5d6b63; overflow-wrap: anywhere; }
.invite-link { display: block; text-align: left; font-size: 12px; color: #5d6b63; }
.invite-link input { margin-top: 4px; }
.invite-actions { display: flex; gap: 8px; margin-top: 10px; }
.invite-actions .tool-btn { flex: 1; min-height: 44px; font-size: 15px; font-weight: 600; }
.vote-invite .share-out { text-align: left; }
/* no share sheet (plain http): π¬ WhatsApp / π£ Viber links */
.share-apps { display: flex; gap: 8px; margin-top: 8px; }
.share-app { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; color: #1d2b24;
font-size: 15px; font-weight: 600; text-decoration: none; }
.invite-hint { margin: 14px 0 0; color: #5d6b63; }
.invite-go { margin-top: 18px; }
.invite-go .primary { width: 100%; min-height: 48px; border: 0; border-radius: 10px; background: #2f6f4e; color: #fff; font: inherit; font-size: 16px;
font-weight: 600; cursor: pointer; }
/* the wall's invitation line (a share link, logged out) */
.invite-line { line-height: 1.45; overflow-wrap: anywhere; }
.invite-what { color: #1d2b24; }
.invite-when { color: #5d6b63; }
/* ---- π§ the guided round: Join screen, one trip per step (dots, details, rating, stays), summary ---- */
.guide-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0 20px; border: 1px solid #dde3dc; border-radius: 12px;
overflow-y: auto; overscroll-behavior: contain; background: #fff; }
.guide-dialog::backdrop { background: rgba(0,0,0,.4); }
.guide-dialog [hidden] { display: none !important; }
.guide-top { position: sticky; top: 0; z-index: 3; background: #fff; }
.guide-top #guide-error { margin: 6px 0 8px; }
.guide-dialog .dlg-head { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; justify-content: space-between; align-items: center;
padding: 12px 0 8px; background: #fff; border-bottom: 1px solid #eef1ed; }
.guide-dialog h2 { margin: 0; min-width: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-dialog .dlg-head .tool-btn { flex: none; min-width: 40px; min-height: 40px; }
.guide-body { padding: 4px 0 12px; }
.guide-dialog .list-note { color: #5d6b63; font-size: 13px; }
.g-label { color: #5d6b63; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.g-section-title { margin: 14px 0 6px; font-size: 15px; }
.g-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.g-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 14px; background: #eef5f0; font-size: 13px; overflow-wrap: anywhere; }
.g-big { min-height: 48px; padding: 8px 16px; border-radius: 10px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.guide-dialog .primary { border: 0; background: #2f6f4e; color: #fff; cursor: pointer; }
.guide-dialog .primary:disabled { opacity: .5; cursor: default; }
/* Join */
.g-join { max-width: 460px; margin: 0 auto; padding: 8px 0; text-align: center; }
.g-hero { font-size: 46px; line-height: 1.1; }
.g-join-title { margin: 6px 0 4px; font-size: 21px; overflow-wrap: anywhere; }
.g-join-by { margin: 0; font-size: 15px; }
.g-join-when { margin: 4px 0 14px; color: #5d6b63; }
.g-who { margin: 0 0 14px; }
.g-who .g-chips { justify-content: center; }
.g-how { margin: 6px 0 10px; padding: 12px 14px 12px 34px; border-radius: 10px; background: #f4f6f3; text-align: left; line-height: 1.5; }
.g-how li + li { margin-top: 4px; }
.g-trips-count { margin: 0 0 14px; color: #5d6b63; }
.g-join-actions { display: flex; flex-direction: column; gap: 8px; }
.g-join .tool-btn.g-big { border: 1px solid #c8d0c6; background: #fff; font-weight: normal; }
/* progress */
.g-progress { margin: 6px 0 10px; }
.g-step-label { font-size: 15px; }
.g-step-rated { color: #5d6b63; font-size: 13px; }
.g-dots { display: flex; flex-wrap: wrap; gap: 0; margin: 2px -8px 0; }
.g-dot { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; background: none;
cursor: pointer; -webkit-tap-highlight-color: transparent; }
.g-dot-mark { display: block; width: 14px; height: 14px; border: 2px solid #9fb3a7; border-radius: 50%; background: #fff; }
.g-dot.rated .g-dot-mark { border-color: #2f6f4e; background: #2f6f4e; }
.g-dot.current .g-dot-mark { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #b5562f; }
.g-dot-end { font-size: 18px; opacity: .55; }
.g-dot-end.current { opacity: 1; }
.g-dot:focus-visible { outline: 2px solid #1f4fa3; outline-offset: -4px; border-radius: 8px; }
/* the trip */
.g-trip-name { margin: 4px 0 6px; font-size: 21px; line-height: 1.25; overflow-wrap: anywhere; outline: none; }
.g-facts { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 2px 0 8px; }
.g-fact { padding: 2px 9px; border-radius: 12px; background: #f1f4f0; font-size: 13px; }
.g-notes { margin: 8px 0; padding: 10px 12px; border-left: 3px solid #b5562f; border-radius: 0 8px 8px 0; background: #fbf5ef; }
.g-notes-text { margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.g-hikes, .g-stays, .g-sum-list { list-style: none; margin: 0; padding: 0; }
.g-hike { padding: 8px 0; border-bottom: 1px solid #eef1ed; }
.g-item-head { display: flex; gap: 6px; align-items: flex-start; justify-content: space-between; }
.g-item-name { font-weight: 600; overflow-wrap: anywhere; }
.g-item-meta { color: #5d6b63; font-size: 13px; }
.g-out { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 32px; margin: -6px -8px -6px 0;
color: #1f4fa3; font-size: 18px; text-decoration: none; }
.g-nature { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 0; }
.g-map-btn { margin-top: 12px; min-height: 40px; font-weight: 600; }
/* rate */
.g-rate { margin: 16px 0 0; padding: 12px; border-radius: 12px; background: #f4f7f3; border: 1px solid #e1e8df; }
.g-rate .g-section-title { margin: 0 0 8px; }
.g-rate-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.g-rate-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 6px 4px;
border: 2px solid #d3dbd1; border-radius: 12px; background: #fff; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.g-rate-emoji { font-size: 26px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.g-rate-label { font-size: 13px; font-weight: 600; color: #3c4a42; }
@media (hover: hover) { .g-rate-btn:hover, .g-stay-btn:hover { border-color: #9fb3a7; } }
.g-rate-btn[aria-pressed="true"] { border-color: #2f6f4e; background: #dcefe3; box-shadow: inset 0 0 0 1px #2f6f4e; }
.g-rate-btn[data-rating="nogo"][aria-pressed="true"] { border-color: #a8322d; background: #fbe3e1; box-shadow: inset 0 0 0 1px #a8322d; }
.g-love-note { margin: 8px 0; color: #5d6b63; font-size: 13px; overflow-wrap: anywhere; }
.g-comment { display: block; width: 100%; padding: 8px 10px; border: 1px solid #c8d0c6; border-radius: 8px; font: inherit; background: #fff; }
.g-comment:disabled { background: #f1f3f0; }
/* stays */
.g-sleep { margin: 16px 0 0; }
.g-sleep .g-section-title { margin: 0 0 2px; }
.g-hint { margin: 0 0 8px; color: #5d6b63; font-size: 13px; }
.g-collapsed { padding: 10px 12px; border-radius: 10px; background: #fbe3e1; color: #7a2622; }
.g-show-anyway { font-size: 14px; min-height: 40px; }
.g-stay { padding: 10px; margin-bottom: 8px; border: 1px solid #e1e8df; border-radius: 12px; }
.g-stay-top { display: flex; gap: 10px; }
.g-stay-photo { flex: none; width: 76px; height: 76px; border-radius: 8px; object-fit: cover; background: #eef1ed; }
.g-stay-nophoto { display: flex; align-items: center; justify-content: center; font-size: 30px; }
.g-stay-info { flex: 1; min-width: 0; }
.g-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.g-tag { padding: 1px 7px; border-radius: 10px; background: #eef1ed; color: #5d6b63; font-size: 11px; }
.g-tag-dog { background: #e3efe7; color: #2f6f4e; }
.g-stay-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.g-stay-btn { min-height: 40px; padding: 4px 2px; border: 1px solid #d3dbd1; border-radius: 10px; background: #fff; font: inherit; font-size: 13px;
cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-tap-highlight-color: transparent; }
.g-stay-btn[aria-pressed="true"] { border-color: #2f6f4e; background: #2f6f4e; color: #fff; }
.g-stay-btn[data-rating="nogo"][aria-pressed="true"] { border-color: #a8322d; background: #a8322d; }
/* summary */
.g-warn { margin: 6px 0; padding: 10px 12px; border-radius: 10px; background: #fff4d6; border: 1px solid #f0d58a; }
.g-done { margin: 6px 0; padding: 10px 12px; border-radius: 10px; background: #e3efe7; border: 1px solid #b9d6c3; color: #1f5137; font-weight: 600; }
.g-love-sum { margin: 8px 0 10px; font-size: 15px; overflow-wrap: anywhere; }
.g-sum-row { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 48px; margin-bottom: 8px; padding: 10px 12px; border: 1px solid #e1e8df;
border-radius: 12px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) { .g-sum-row:hover { border-color: #9fb3a7; background: #fafcf9; } }
.g-sum-row.unrated { border-color: #f0d58a; background: #fffbf0; }
.g-sum-head { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.g-sum-name { font-weight: 600; overflow-wrap: anywhere; }
.g-sum-rating { flex: none; padding: 1px 8px; border-radius: 10px; background: #fff0cf; font-size: 13px; white-space: nowrap; }
.g-sum-rating.r-love, .g-sum-rating.r-ok { background: #e3efe7; }
.g-sum-rating.r-nogo { background: #fbe3e1; }
.g-sum-line { color: #3c4a42; font-size: 13px; overflow-wrap: anywhere; }
.g-sum-line.muted { color: #8a968f; }
.g-sum-edit { align-self: flex-end; color: #1f4fa3; font-size: 12px; }
/* the bottom bar: β Back / Next β (sticky) */
.guide-nav { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 8px; padding: 10px 0 14px; background: #fff; border-top: 1px solid #eef1ed; }
.guide-nav button { min-height: 44px; border-radius: 10px; font: inherit; font-size: 15px; -webkit-tap-highlight-color: transparent; }
#guide-back { flex: 0 0 auto; padding: 0 14px; }
#guide-next { flex: 1; padding: 0 16px; font-weight: 600; }
/* β Back to voting: desktop top centre of the map; phones just above the tab bar */
.guide-pill { position: absolute; top: 10px; left: 50%; z-index: 1100; transform: translateX(-50%); display: flex; align-items: center;
max-width: calc(100% - 24px); border-radius: 24px; background: #2f6f4e; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.guide-pill[hidden] { display: none; }
/* desktop: the pill sits at the top of the map β the draw / nature hints move below it while it shows */
#map-wrap:has(#guide-pill:not([hidden])) #draw-hint, #map-wrap:has(#guide-pill:not([hidden])) #nature-hint { top: 64px; }
.guide-pill button { min-height: 44px; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; }
.guide-pill-back { padding: 0 6px 0 18px; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guide-pill-close { flex: none; min-width: 44px; font-size: 16px; opacity: .8; }
/* ---- welcome wall (login first): full screen over the app, the Log in / Sign up form on a card ---- */
.welcome { position: fixed; inset: 0; z-index: 5000; display: flex; overflow-y: auto; overscroll-behavior: contain; padding: 24px 16px;
background: linear-gradient(160deg, #2f6f4e 0%, #4f8f6a 55%, #b5562f 140%); }
.welcome[hidden] { display: none; }
.welcome-card { width: min(400px, 100%); margin: auto; padding: 20px 20px 16px; border-radius: 12px; background: #fff;
box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.welcome-brand { margin: 0; font-size: 26px; }
.welcome-tagline { margin: 4px 0 12px; color: #5d6b63; font-size: 15px; }
.welcome-invite { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: #fff4d6; border: 1px solid #f0d58a; font-size: 15px; }
.welcome-invite:empty, .welcome-invite[hidden] { display: none; }
.welcome-loading { display: flex; gap: 8px; align-items: center; min-height: 120px; justify-content: center; color: #5d6b63; }
.welcome-loading[hidden] { display: none; }
/* active-round banner: a strip under the header (phone: at the top of the Map tab) */
.round-banner { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 6px 16px; background: #fff4d6;
border-bottom: 1px solid #f0d58a; font-size: 14px; }
.round-banner[hidden] { display: none; }
.round-banner-text { overflow-wrap: anywhere; }
.round-banner .primary { padding: 5px 12px; border: 0; border-radius: 6px; background: #2f6f4e; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
#account-btn, #account-menu { display: none; } /* phone top bar only */
/* ---- phone layout shell: one DOM; on desktop the wrappers vanish and the header looks as before ---- */
#controls-more, #controls .search-row { display: contents; }
#menu-btn, #controls .panel-head, #tabbar { display: none; }
#controls .brand { order: -2; }
#trips-btn, #vote-btn, #nature-btn { order: -1; } /* before π Go to, as before the wrapper existed */
.tab-badge { margin-left: 4px; padding: 0 6px; border-radius: 9px; background: #2f6f4e; color: #fff; font-size: 11px; font-weight: 600; }
.tab-badge[hidden] { display: none; }
#tab-badge-vote { background: #c0392b; }
#map-busy, #tab-spin-list { display: none; } /* phone only: desktop shows the sidebar's own spinners */
/* Phone layout: narrow, or a touch screen β€ 500 px tall (a phone in landscape). Same query as PHONE_QUERY in mobile.js. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
:root { --tabbar-h: 53px; } /* the bottom tab bar's height without the safe area (οΌ Trip sheet sits on it) */
body { height: 100dvh; overflow: hidden; }
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; }
.tool-btn, #search, #search-all, #suggest-trips, #ask-button { min-height: 40px; }
#goto-input, #ask-input, #place, #controls input[type=date] { min-height: 40px; }
/* top bar: π Go to + β° */
#controls { flex-wrap: nowrap; gap: 8px; padding: 6px 10px; padding-top: calc(6px + env(safe-area-inset-top)); }
#controls .brand { display: none; }
.goto { flex: 1; min-width: 0; }
#goto-input { flex: 1; width: auto; min-width: 0; }
#menu-btn { display: inline-block; min-width: 44px; min-height: 44px; font-size: 20px; line-height: 1; }
/* your emoji next to β° β Change emoji / Log out */
#account-btn:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 44px; min-height: 44px;
padding: 0; font-size: 22px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
#account-menu:not([hidden]) { display: block; position: fixed; z-index: 3500; top: calc(54px + env(safe-area-inset-top)); right: 10px;
min-width: 200px; max-width: calc(100vw - 20px); padding: 4px; background: #fff; border: 1px solid #dde3dc; border-radius: 10px;
box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.account-menu-name { padding: 8px 12px; color: #5d6b63; overflow-wrap: anywhere; border-bottom: 1px solid #eef1ed; }
#account-menu button { display: block; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 6px; background: none;
font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
#account-menu button:active, #account-menu button:focus-visible { background: #e7f1ea; }
/* the round banner: a card at the top of the Map tab, below the top bar */
.round-banner { margin: 6px 10px 0; padding: 6px 8px 6px 12px; border: 1px solid #f0d58a; border-radius: 10px;
box-shadow: 0 1px 4px rgba(0,0,0,.12); font-size: 13px; }
body:not(.phone-tab-map) .round-banner { display: none; }
.round-banner-text { flex: 1 1 180px; }
.round-banner .primary { min-height: 40px; margin-left: auto; }
/* the welcome wall: the card fills the screen */
.welcome { padding: 0; }
.welcome-card { width: 100%; min-height: 100%; margin: 0; padding: calc(20px + env(safe-area-inset-top)) 16px 0; border-radius: 0;
box-shadow: none; }
/* β° controls panel: full screen, search buttons sticky at the bottom */
#controls-more { display: none; }
body.menu-open #controls-more { display: flex; flex-direction: column; align-items: stretch; gap: 12px; position: fixed; inset: 0; z-index: 3000;
overflow-y: auto; overscroll-behavior: contain; padding: 0 16px; background: #fff; }
#controls .panel-head { display: flex; order: -10; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1;
padding: calc(8px + env(safe-area-inset-top)) 0 8px; background: #fff; border-bottom: 1px solid #eef1ed; }
#controls .panel-head h2 { margin: 0; font-size: 17px; }
#controls .panel-head .tool-btn { min-width: 44px; min-height: 44px; }
#trips-btn, #vote-btn { display: none; } /* the 𧳠Trips / π³οΈ Vote tabs click them */
#controls-more .auth-area { order: 1; margin-left: 0; min-height: 40px; display: flex; align-items: center; }
#controls-more > label:has(#start) { order: 2; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#controls-more > label:has(#start) input { flex: 1; min-width: 0; }
#home-label { order: 3; }
#controls-more > label:has(#drive) { order: 4; display: flex; gap: 8px; align-items: center; }
#drive { flex: 1; min-width: 0; height: 40px; }
#controls-more > label.dog { order: 5; min-height: 40px; display: flex; gap: 8px; align-items: center; }
#modes { order: 6; flex-wrap: wrap; gap: 4px 16px; }
#modes label { min-height: 40px; display: inline-flex; gap: 6px; align-items: center; }
#place { order: 7; }
#hike-filters-btn, #stay-filters-btn { order: 8; }
#controls .draw-group { order: 9; display: flex; flex-wrap: wrap; }
#controls .draw-group .tool-btn { flex: 1; }
#nature-btn { order: 10; }
#controls .search-row { order: 20; display: flex; flex-wrap: wrap; gap: 8px; position: sticky; bottom: 0; margin-top: auto;
padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #eef1ed; }
#controls .search-row button { flex: 1 1 30%; min-height: 44px; padding: 6px 8px; }
/* Map tab (default): map only; List tab: the sidebar + Ask Claude, map hidden */
main { position: relative; }
#sidebar { display: none; width: 100%; border-right: 0; }
#ask { display: none; padding: 8px 12px; }
body.phone-tab-list #sidebar { display: block; flex: 1; }
body.phone-tab-list #map-wrap { display: none; }
body.phone-tab-list #ask { display: block; }
/* bottom tab bar */
#tabbar { display: flex; position: relative; z-index: 1500; background: #fff; box-shadow: 0 -1px 0 #dde3dc; padding-bottom: env(safe-area-inset-bottom); }
#tabbar button { flex: 1; min-width: 0; height: var(--tabbar-h); padding: 4px 2px; border: 0; border-top: 2px solid transparent; background: none;
font: inherit; font-size: 13px; color: #5d6b63; white-space: nowrap; cursor: pointer; }
#tabbar button[aria-pressed="true"] { color: #1d2b24; font-weight: 600; border-top-color: #2f6f4e; }
#tab-spin-list:not([hidden]) { display: inline-block; margin-left: 4px; }
/* every dialog full screen, β header sticky */
.trips-dialog, .auth-dialog, .vote-dialog, .filters-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0;
border: 0; border-radius: 0; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; }
.trips-dialog, .auth-dialog, .vote-dialog { padding: 0 16px calc(16px + env(safe-area-inset-bottom)); }
.dlg-head { position: sticky; top: 0; z-index: 2; margin-bottom: 4px; padding: calc(8px + env(safe-area-inset-top)) 0 8px; background: #fff;
border-bottom: 1px solid #eef1ed; }
.dlg-head .tool-btn { min-width: 44px; min-height: 44px; }
.filters-dialog .dialog-buttons { position: sticky; bottom: 0; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: #fff; }
.filters-dialog .dialog-buttons button { min-height: 44px; }
/* 16 px everywhere a phone could zoom in on focus (beats the dialogs' own `font: inherit` rules) */
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
/* map: hints centred under the πΏ chips row; the draw hint can be tapped to cancel */
#draw-hint, #nature-hint { width: max-content; max-width: calc(100vw - 32px); text-align: center; }
#draw-hint { top: 58px; pointer-events: auto; cursor: pointer; }
#nature-hint { top: 104px; }
#map-wrap:has(#guide-pill:not([hidden])) #draw-hint { top: 58px; } /* the phone pill is at the bottom */
#map-wrap:has(#guide-pill:not([hidden])) #nature-hint { top: 104px; }
.leaflet-draw-tooltip { display: none; } /* it follows a mouse pointer; our #draw-hint says what to do on phones */
/* "Searchingβ¦" while a search loads (the sidebar's spinners are on the List tab); below the hints when they show */
#map-busy:not([hidden]) { display: block; position: absolute; top: 58px; left: 50%; transform: translateX(-50%); z-index: 1000;
padding: 6px 14px; border-radius: 16px; background: #fff; color: #1d2b24; box-shadow: 0 2px 8px rgba(0,0,0,.3);
pointer-events: none; white-space: nowrap; }
#draw-hint:not([hidden]) ~ #map-busy, #nature-hint:not([hidden]) ~ #map-busy { top: 150px; }
/* Leaflet's controls thumb-sized; drawing goes through the β° panel's β / β― buttons (they show #draw-hint), so
Leaflet.draw's own draw buttons are hidden β its edit / delete buttons stay */
#map .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; font-size: 24px; }
#map .leaflet-draw-toolbar a { box-sizing: border-box; border: 5px solid #fff; } /* 40 px, the 30 px sprite icon centred */
#map .leaflet-draw-section:has(.leaflet-draw-draw-rectangle, .leaflet-draw-draw-circle) { display: none; }
#map .leaflet-draw-actions { left: 42px; }
#map .leaflet-draw-actions a { height: 40px; line-height: 40px; }
#map .leaflet-control-layers-toggle { width: 44px; height: 44px; }
#nature-chips { top: 10px; left: 60px; right: 66px; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px;
overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px; pointer-events: auto; }
#nature-chips::-webkit-scrollbar { display: none; }
.nature-chip, #nature-chips .load-chip { flex: 0 0 auto; white-space: nowrap; }
.nature-chip { min-height: 40px; padding: 0 12px; font-size: 13px; }
/* map popups fit the screen; their buttons and links are thumb-sized */
.leaflet-popup-content { max-width: calc(85vw - 60px); margin-right: 40px; }
.leaflet-container a.leaflet-popup-close-button { width: 40px; height: 40px; font-size: 24px; line-height: 40px; }
.popup a, .popup .add-trip { display: inline-flex; align-items: center; min-height: 40px; }
.popup .add-trip { padding: 0 4px; font-size: 14px; }
/* list rows: οΌ Trip, πΎ Save and β links are thumb-sized */
#sidebar li { padding: 8px; }
#sidebar .add-trip, #sidebar .save-combo, #sidebar .open-link { display: inline-flex; align-items: center; min-height: 40px;
padding: 0 6px; font-size: 13px; }
/* οΌ Trip: a bottom sheet above the tab bar */
.trip-menu { left: 0 !important; right: 0; top: auto !important; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); min-width: 0;
max-width: none; max-height: 50dvh; padding: 6px 8px; border-radius: 14px 14px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,.2); }
.trip-menu button { min-height: 44px; padding: 8px 12px; font-size: 15px; }
/* filters dialogs: one column, full-width controls */
.filters-dialog .shared { flex-direction: column; align-items: stretch; }
.filters-dialog .shared-item { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px; }
.filters-dialog .shared-item input:not([type=checkbox]) { flex: 1; min-width: 0; min-height: 40px; }
.filters-dialog .fields { grid-template-columns: 1fr; }
.filters-dialog select { width: 100%; min-height: 40px; }
.filters-dialog .field > input[type=number] { width: 100%; min-height: 40px; }
.filters-dialog .range-row input[type=number] { flex: 1; width: auto; min-width: 0; min-height: 40px; }
.filters-dialog .chip { display: inline-flex; gap: 4px; align-items: center; min-height: 40px; }
.filters-dialog .dialog-buttons button { flex: 1; }
/* trip editor: dates on one line, the rest one per line; item rows wrap under their name */
#trip-editor .row:not(.airbnb-add) { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
#trip-editor .row > label:has(#trip-start) { display: flex; gap: 6px; align-items: center; }
#trip-start, #trip-end { min-width: 0; width: 100%; }
#trip-editor .row > label:has(#trip-guests), #trip-editor .row > label:has(#trip-dog) { grid-column: 1 / -1; min-height: 40px;
display: flex; gap: 8px; align-items: center; }
#trip-guests { width: 6em; }
#trip-editor input:not([type=checkbox]), #trip-editor textarea { min-height: 40px; }
.trip-items li { flex-wrap: wrap; padding: 6px 0; }
.trip-items li > a, .trip-items li > span:first-child { flex: 1 1 100%; overflow-wrap: anywhere; }
.trip-items .item-tools { margin-left: auto; }
.trip-items .item-tools .link-btn { min-width: 40px; min-height: 40px; font-size: 16px; }
#trip-editor .dlg-actions > *, .auth-form .dlg-actions > *, .vote-start .dlg-actions > * { flex: 1 1 40%; min-height: 44px; }
#trip-editor .link-btn#trip-back, #trip-round button { min-height: 40px; font-size: 14px; }
.trips-list li { padding: 12px 8px; }
/* login dialog */
.auth-tabs button { flex: 1; min-height: 44px; }
.auth-form input { min-height: 44px; }
.emoji-grid { max-height: none; overflow: visible; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
.emoji-btn { height: 44px; font-size: 24px; }
#controls-more .auth-area .name-btn { min-height: 40px; font-size: 16px; }
/* the long sign-up picker: Sign up (and its message) stay on screen at the bottom */
.auth-dialog { padding-bottom: 0; } /* the sticky bar below carries the bottom inset, nothing shows under it */
.auth-form .dlg-actions { position: sticky; bottom: 0; z-index: 1; margin: 0; padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
background: #fff; border-top: 1px solid #eef1ed; }
.emoji-dialog .emoji-grid { padding-bottom: 16px; }
#auth-error:not(:empty) { position: sticky; bottom: 65px; z-index: 1; margin: 0; padding: 6px 0; background: #fff; }
/* vote dialog: one column, the three rating buttons on one full-width row */
.vote-banner, .vote-panel { flex-direction: column; align-items: stretch; }
.vote-dialog .dlg-actions > * { flex: 1 1 40%; min-height: 40px; }
.vote-panel button, .vote-banner button { min-height: 40px; }
.vote-panel label:not(.vote-check) { display: flex; flex-direction: column; gap: 4px; }
.vote-panel input[type=datetime-local] { width: 100%; min-height: 40px; }
.vote-stays { margin-left: 0; }
.vote-counts .count-btn { min-height: 40px; min-width: 52px; font-size: 14px; }
.vote-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vote-btn-rate { min-height: 44px; padding: 4px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vote-comment { grid-column: 1 / -1; min-width: 0; min-height: 40px; }
.vote-actions .link-btn { min-height: 40px; font-size: 14px; }
.vote-check { display: flex; gap: 8px; align-items: center; min-height: 40px; }
.vote-start label.wide input { min-height: 44px; }
.vote-head, .vote-status, .vote-trip { overflow-wrap: anywhere; }
/* π overview: 44 px tabs; the grid scrolls inside .ov-scroll (the page never side-scrolls), cells β₯ 40 px */
.vote-tabs button { flex: 1; min-height: 44px; }
.ov-grid .ov-name { min-width: 112px; max-width: 42vw; }
.ov-cell { min-width: 44px; height: 44px; }
.ov-cell-btn { min-width: 40px; min-height: 40px; }
.ov-trip, .ov-more { min-height: 40px; }
.share-btn { width: 100%; min-height: 44px; font-size: 15px; }
/* π§ the guide: full screen, the β header and the β Back / Next β bar sticky; the toast sits above that bar */
.guide-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0 16px; border: 0; border-radius: 0; }
.guide-dialog .dlg-head { padding: calc(8px + env(safe-area-inset-top)) 0 8px; }
.guide-dialog .dlg-head .tool-btn { min-width: 44px; min-height: 44px; }
.guide-dialog { display: none; }
.guide-dialog[open] { display: flex; flex-direction: column; }
.guide-body { flex: 1 0 auto; }
.guide-nav { padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
.guide-nav button { min-height: 48px; font-size: 16px; }
.g-trip-name { font-size: 22px; }
.g-dots { margin: 2px -10px 0; }
#guide-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
.vote-toast { bottom: calc(16px + env(safe-area-inset-bottom)); }
.g-map-btn { width: 100%; min-height: 44px; font-size: 15px; }
.g-out { min-height: 40px; }
/* the pill floats above the tab bar, wherever the Map tab is */
.guide-pill { position: fixed; top: auto; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px); max-width: calc(100vw - 24px); }
.vote-invite { padding-top: 16px; }
#vote-invite-url, .share-url { min-height: 44px; }
/* the emoji prompt's Skip bar: sticky with 44 px buttons like the sign-up form's */
.emoji-dialog .dlg-actions { position: sticky; bottom: 0; z-index: 1; margin: 0; padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
background: #fff; border-top: 1px solid #eef1ed; }
.emoji-dialog .dlg-actions > * { flex: 1 1 40%; min-height: 44px; }
}