*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --cream: #f5f0e8; --cream-dark: #ede8df;
  --cream-border: #c8bfaa; --cream-border-light: #ddd6c4;
  --ink: #1e1c18; --ink-mid: #4a4538; --ink-light: #7a7060; --ink-hint: #a89f88;
  --green: #1D9E75; --green-dark: #155f47; --green-mid: #2db88a;
  --green-light: #7fd4b4; --green-wash: rgba(29,158,117,0.10);
  --amber: #c47c1a; --red: #b83a2e;
  --r: 12px; --r-pill: 30px;
  --shadow: 3px 3px 0 rgba(0,0,0,0.10);
  --shadow-lg: 4px 4px 0 rgba(0,0,0,0.10);
}
body { font-family: 'Poppins', sans-serif; background: var(--cream); color: var(--ink); min-height: 100vh; font-size: 13px; line-height: 1.5; }
.layout { display: grid; grid-template-columns: 380px 1fr; min-height: 100vh; }

/* SIDEBAR */
.sidebar { background: var(--cream); border-right: 2px dashed var(--cream-border); display: flex; flex-direction: column; overflow-y: auto; z-index: 10; scrollbar-width: thin; scrollbar-color: var(--cream-border) transparent; }
.sidebar-inner { padding: 1.25rem 1.25rem 0; flex: 1; }

/* LOGO */
.logo { display: flex; align-items: center; gap: 10px; margin-bottom: 1.25rem; }
.help-link { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; background: none; border: none; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 500; color: var(--ink-light); cursor: pointer; padding: 4px; -webkit-tap-highlight-color: transparent; transition: color 0.15s; }
.help-link:hover { color: var(--green-dark); }
.help-link i { font-size: 14px; color: var(--green); }
/* Help modal content */
.help-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-light); margin: 18px 0 8px; }
.help-steps { margin: 0 0 4px; padding-left: 20px; }
.help-steps li { font-size: 12.5px; color: var(--ink-mid); line-height: 1.5; margin-bottom: 8px; }
.help-feat { margin: 0; padding-left: 18px; list-style: none; }
.help-feat li { position: relative; font-size: 12.5px; color: var(--ink-mid); line-height: 1.5; margin-bottom: 8px; }
.help-feat li::before { content: '✓'; position: absolute; left: -18px; color: var(--green); font-weight: 700; }
.help-steps b, .help-feat b { color: var(--ink); font-weight: 600; }
.help-foot { font-size: 12px; color: var(--ink-light); margin-top: 16px; font-weight: 500; }
.logo-icon { width: 36px; height: 36px; flex-shrink: 0; }
.logo-name { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.4px; line-height: 1.1; }
.logo-tag { font-size: 9px; font-weight: 500; color: var(--green-dark); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 1px; }

/* SECTION LABELS */
.sec { margin-bottom: 1rem; }
.sec-label { font-size: 15px; font-weight: 600; letter-spacing: -0.1px; color: var(--ink); margin-bottom: 5px; display: flex; align-items: center; gap: 7px; }
.sec-label > i { font-size: 13px; color: var(--green); }
.new-badge { font-size: 8px; background: var(--green-wash); color: var(--green-dark); padding: 1px 6px; border-radius: var(--r-pill); font-weight: 600; letter-spacing: 0.04em; border: 1px solid rgba(29,158,117,0.20); }

/* DIVIDERS */
.divider { border: none; border-top: 1.5px dashed var(--cream-border-light); margin: 10px 0; }

/* INPUTS */
.field-wrap { position: relative; margin-bottom: 7px; }
.field-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--green); pointer-events: none; }
.field-input { width: 100%; padding: 9px 12px 9px 34px; background: white; border: 1.5px solid var(--cream-border); border-radius: var(--r-pill); font-family: 'Poppins', sans-serif; font-size: 11px; color: var(--ink); outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
/* hide the native datalist dropdown arrow on type-to-search fields */
#everythingInput::-webkit-calendar-picker-indicator, #catSearch::-webkit-calendar-picker-indicator { display: none !important; }
#everythingInput, #catSearch { appearance: none; -webkit-appearance: none; }
.field-input::placeholder { color: var(--ink-hint); }
.field-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(29,158,117,0.10); }
.field-input.confirmed { border-color: var(--green); background: rgba(255,255,255,0.90); }

/* TIME — madlib picker */
.time-q { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 14px; letter-spacing: -0.1px; }
.madlib { font-size: 12px; line-height: 1.75; color: var(--ink-mid); font-weight: 400; }
.madlib b { color: var(--ink); font-weight: 600; }
.madlib-select { display: inline-block; width: auto; vertical-align: middle; background: white; border: 1.5px solid var(--green); border-radius: var(--r-pill); padding: 3px 24px 3px 11px; margin: -3px 0 0 3px; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; color: var(--green-dark); cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231D9E75' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
.madlib-select:focus { box-shadow: 0 0 0 3px var(--green-wash); }
.madlib-colon { font-weight: 700; color: var(--ink-mid); margin: 0 1px; }
.leaving-at { margin-top: 10px; }

.time-mode { display: flex; background: var(--cream-dark); border: 1.5px solid var(--cream-border); border-radius: var(--r-pill); padding: 3px; margin: 16px 0 14px; }
.time-mode button { flex: 1; background: none; border: none; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; color: var(--ink-light); padding: 7px 10px; border-radius: var(--r-pill); cursor: pointer; transition: all 0.15s; -webkit-tap-highlight-color: transparent; }
.time-mode button.active { background: var(--green); color: white; box-shadow: var(--shadow); }

.dur-slider-row { margin: 12px 0 10px; }
.dur-slider-row input[type=range] { width: 100%; accent-color: var(--green); cursor: pointer; }
.dur-readout { display: flex; align-items: baseline; gap: 8px; }
.dur-big { font-size: 12px; font-weight: 700; color: var(--green-dark); letter-spacing: -0.3px; }
.dur-desc { font-size: 12px; color: var(--ink-light); font-weight: 400; }
.dur-derived { font-size: 12px; color: var(--ink-light); margin-top: 10px; line-height: 1.5; }
.dur-derived b { color: var(--green-dark); font-weight: 700; }
.nolimit { display: flex; align-items: center; gap: 7px; margin-top: 14px; cursor: pointer; font-size: 12px; color: var(--ink-mid); user-select: none; }
.nolimit input { accent-color: var(--green); width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; }

/* Step continue link */
.step-next-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; padding: 0; background: none; border: none; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; color: var(--green-dark); cursor: pointer; transition: color 0.15s; -webkit-tap-highlight-color: transparent; }
.step-next-btn:hover:not(:disabled) { color: var(--green); }
.step-next-btn:disabled { color: var(--ink-hint); opacity: 0.5; cursor: not-allowed; }
.step-next-btn i { font-size: 14px; }

/* TIME BUDGET (legacy bar in results) */
.time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 8px; }
.time-card { background: white; border: 1.5px solid var(--cream-border); border-radius: var(--r); padding: 8px 11px; }
.time-card label { display: block; font-size: 8px; font-weight: 600; color: var(--ink-light); text-transform: uppercase; letter-spacing: 0.10em; margin-bottom: 4px; }
.time-card input, .time-card select { width: 100%; background: transparent; border: none; outline: none; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; }
.budget-bar { margin-bottom: 10px; }
.budget-track { height: 5px; background: var(--cream-border-light); border-radius: var(--r-pill); overflow: hidden; }
.budget-fill { height: 100%; border-radius: var(--r-pill); background: var(--green); transition: width 0.4s, background 0.3s; }
.budget-labels { display: flex; justify-content: space-between; margin-top: 4px; font-size: 9px; font-weight: 500; }

/* STORES */
.store-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 7px; }
.store-chip { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1.5px solid var(--cream-border); border-radius: var(--r-pill); cursor: pointer; background: white; font-size: 11px; font-weight: 400; color: var(--ink-mid); transition: all 0.12s; user-select: none; }
.store-chip:hover { border-color: var(--green); color: var(--ink); }
.store-chip.on { border-color: var(--green); background: var(--green-wash); color: var(--green-dark); font-weight: 600; }
.store-chip .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.custom-row { display: flex; gap: 5px; margin-top: 5px; }
.store-input-wrap { position: relative; flex: 1; min-width: 0; }
.store-input-wrap input { width: 100%; padding: 7px 12px; background: white; border: 1.5px solid var(--cream-border); border-radius: var(--r-pill); font-family: 'Poppins', sans-serif; font-size: 11px; color: var(--ink); outline: none; transition: border-color 0.15s; }
.store-input-wrap input::placeholder { color: var(--ink-hint); }
.store-input-wrap input:focus { border-color: var(--green); }
.store-input-wrap input::-webkit-calendar-picker-indicator { opacity: 0; width: 0; padding: 0; margin: 0; }
.store-input-wrap input::-webkit-list-button { display: none; }
.store-input-arrow { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--ink-hint); pointer-events: none; }
.custom-row button { flex-shrink: 0; padding: 7px 10px; border: 1.5px solid var(--cream-border); border-radius: var(--r-pill); background: white; font-size: 11px; font-weight: 500; cursor: pointer; color: var(--ink-mid); font-family: 'Poppins', sans-serif; transition: all 0.12s; white-space: nowrap; }
.custom-row button:hover { border-color: var(--green); color: var(--green-dark); background: var(--green-wash); }
.store-add-hint { font-size: 10px; color: var(--ink-hint); margin-top: 6px; font-weight: 300; }
/* CUSTOM ADDRESS STOPS */
.custom-address-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.custom-addr-chip { display: flex; align-items: center; gap: 7px; padding: 6px 10px; background: white; border: 1.5px solid var(--cream-border); border-radius: var(--r-pill); font-size: 11px; color: var(--ink-mid); }
.custom-addr-chip span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.custom-addr-chip button { background: none; border: none; color: var(--cream-border); cursor: pointer; font-size: 14px; padding: 0; line-height: 1; flex-shrink: 0; }
.custom-addr-chip button:hover { color: var(--red); }

/* RESET LISTS BUTTON */
.reset-lists-btn { background: none; border: none; font-size: 10px; color: var(--ink-hint); cursor: pointer; font-family: 'Poppins', sans-serif; display: flex; align-items: center; gap: 4px; padding: 0; font-weight: 400; }
.reset-lists-btn:hover { color: var(--red); }

/* SPECIAL STOPS (fuel / café checkboxes) */
.special-stops { margin-top: 10px; padding-top: 8px; border-top: 1.5px dashed var(--cream-border-light); display: flex; flex-direction: column; gap: 4px; }
.special-stop-label { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; font-size: 11px; font-weight: 500; color: var(--ink-mid); user-select: none; -webkit-tap-highlight-color: transparent; }
.special-stop-label input[type=checkbox] { accent-color: var(--green); width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }
.special-stop-label i { font-size: 14px; color: var(--green); }
.special-stop-opts { display: none; padding: 4px 0 2px 22px; flex-direction: column; gap: 8px; }
.special-stop-opts.visible { display: flex; }

/* STOP PRIORITIES */
.stop-priority-list { display: flex; flex-direction: column; gap: 5px; }
.stop-priority-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: white; border: 1.5px solid var(--cream-border); border-radius: var(--r); }
.sp-num { width: 22px; height: 22px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: white; flex-shrink: 0; }
.sp-info { flex: 1; min-width: 0; }
.sp-name { font-size: 11px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-time { font-size: 9px; color: var(--ink-light); margin-top: 1px; }
.sp-info .sp-anytoggle { margin-top: 4px; }
.sp-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sp-time-input { width: 38px; background: var(--cream); border: 1.5px solid var(--cream-border); border-radius: var(--r); padding: 3px 5px; font-size: 10px; font-weight: 600; color: var(--ink); font-family: 'Poppins', sans-serif; text-align: center; outline: none; -moz-appearance: textfield; appearance: textfield; }
.sp-time-input:focus { border-color: var(--green); }
.sp-time-input::-webkit-inner-spin-button, .sp-time-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.priority-toggle { display: flex; border: 1.5px solid var(--cream-border); border-radius: var(--r-pill); overflow: hidden; }
.priority-toggle button { padding: 3px 8px; font-size: 9px; font-weight: 600; border: none; cursor: pointer; font-family: 'Poppins', sans-serif; transition: all 0.12s; background: white; color: var(--ink-hint); }
.priority-toggle button.active-must { background: var(--green-wash); color: var(--green-dark); }
.priority-toggle button.active-nice { background: var(--cream); color: var(--ink-mid); }

/* PREFERENCES */
.pref-card { background: white; border: 1.5px solid var(--cream-border); border-radius: var(--r); overflow: hidden; }
.pref-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px dashed var(--cream-border-light); }
.pref-row:last-child { border-bottom: none; }
.pref-label { font-size: 11px; font-weight: 400; color: var(--ink-mid); display: flex; align-items: center; gap: 7px; }
.pref-label i { font-size: 14px; color: var(--green); }
.toggle { width: 30px; height: 17px; border-radius: var(--r-pill); background: var(--cream-border); position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; border: none; outline: none; padding: 0; }
.toggle.on { background: var(--green); }
.toggle::after { content: ''; position: absolute; width: 13px; height: 13px; border-radius: 50%; background: white; top: 2px; left: 2px; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.toggle.on::after { left: 15px; }

/* SLIDERS */
.detour-row, .corridor-row { display: flex; align-items: center; gap: 10px; }
.detour-row input[type=range], .corridor-row input[type=range] { flex: 1; accent-color: var(--green); cursor: pointer; }
.detour-val, .corridor-val { font-size: 12px; font-weight: 700; color: var(--green-dark); min-width: 42px; text-align: right; }
.hint { font-size: 10px; color: var(--ink-hint); margin-top: 4px; line-height: 1.5; font-weight: 300; }

/* GO BTN */
.go-btn { width: 100%; padding: 12px; background: var(--green); color: white; border: none; border-radius: var(--r-pill); font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.15s, transform 0.1s, box-shadow 0.1s; margin-top: 1rem; letter-spacing: 0.01em; box-shadow: var(--shadow); }
.go-btn:hover { background: var(--green-dark); transform: translate(-1px,-1px); box-shadow: var(--shadow-lg); }
.go-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 rgba(0,0,0,0.10); }
.go-btn:disabled { background: var(--cream-border); color: var(--ink-hint); cursor: not-allowed; transform: none; box-shadow: none; }
.spinner { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,0.4); border-top-color: white; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* FEEDBACK */
.error-box { padding: 9px 12px; background: #fff5f5; border: 1.5px solid #f5c0c0; border-radius: var(--r); font-size: 11px; color: var(--red); margin-top: 8px; display: none; line-height: 1.5; }
.error-box.visible { display: block; }
.warn-box { padding: 9px 12px; background: #fffbf0; border: 1.5px solid #f0d890; border-radius: var(--r); font-size: 11px; color: var(--amber); margin-bottom: 10px; display: none; line-height: 1.5; }
.warn-box.visible { display: block; }

/* RESULTS — bottom sheet inside the map pane */
.results-panel { display: none; background: var(--cream-dark); border-top: 1.5px dashed var(--cream-border); padding: 1rem 1.25rem 1.25rem; overflow-y: auto; max-height: 45%; scrollbar-width: thin; scrollbar-color: var(--cream-border) transparent; }
.results-panel.visible { display: block; }
.stop-list { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; margin-bottom: 10px; }
.stop-row { padding: 9px 12px; background: white; border: 1.5px solid var(--cream-border); border-radius: var(--r); }
.stop-num-r { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; color: white; }
.stop-info-r { flex: 1; min-width: 0; }
.stop-name-r { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop-addr-r { font-size: 10px; color: var(--ink-hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.stop-arrive-r { font-size: 10px; color: var(--green-dark); font-weight: 600; margin-top: 2px; }
.stop-note { color: var(--ink-light); font-weight: 400; }
.stop-note-warn { color: var(--amber); font-weight: 600; }
.stop-tag-r { font-size: 10px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill); flex-shrink: 0; }
.skipped-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border: 1.5px dashed #f0d890; border-radius: var(--r); font-size: 10px; color: var(--amber); margin-bottom: 5px; background: #fffbf0; line-height: 1.5; }
.skipped-item:last-of-type { margin-bottom: 10px !important; }
.skipped-item i { margin-top: 1px; }
.add-anyway-btn { margin-top: 5px; display: inline-flex; align-items: center; padding: 4px 11px; border: 1.5px solid var(--green); border-radius: var(--r-pill); background: var(--green-wash); color: var(--green-dark); font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s, color 0.15s; }
.add-anyway-btn:hover { background: var(--green); color: #fff; }
.stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-bottom: 10px; }
.stat-card-r { background: white; border: 1.5px solid var(--cream-border); border-radius: var(--r); padding: 9px; text-align: center; }
.stat-val-r { font-size: 15px; font-weight: 700; color: var(--ink); }
.stat-label-r { font-size: 8px; font-weight: 500; color: var(--ink-hint); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; }
.stat-card-r.over .stat-val-r { color: var(--amber); }

/* RESULTS ACTIONS */
.results-actions { display: flex; gap: 6px; }
.maps-btn { flex: 2; padding: 10px; background: white; color: var(--green-dark); border: 1.5px solid var(--green); border-radius: var(--r-pill); font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; transition: all 0.15s; box-shadow: 2px 2px 0 rgba(0,0,0,0.08); }
.maps-btn:hover { background: var(--green); color: white; transform: translate(-1px,-1px); box-shadow: var(--shadow); }
.share-btn { flex: 1; padding: 10px; background: white; color: var(--ink-mid); border: 1.5px solid var(--cream-border); border-radius: var(--r-pill); font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s; }
.share-btn:hover { border-color: var(--green); color: var(--green-dark); }

/* RECENT ROUTES */
.recent-toggle { display: flex; align-items: center; gap: 6px; background: none; border: none; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 500; color: var(--ink-light); cursor: pointer; padding: 2px 0; -webkit-tap-highlight-color: transparent; }
.recent-toggle:hover { color: var(--green-dark); }
.recent-toggle i { font-size: 13px; }
.recent-chevron { margin-left: auto; transition: transform 0.2s; }
.recent-chevron.open { transform: rotate(180deg); }
.recent-list { display: flex; flex-direction: column; gap: 5px; }
.recent-chip { padding: 9px 11px; background: white; border: 1.5px solid var(--cream-border); border-radius: var(--r); cursor: pointer; transition: border-color 0.12s; -webkit-tap-highlight-color: transparent; }
.recent-chip:hover { border-color: var(--green); }
.recent-route { font-size: 11px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-meta { font-size: 10px; color: var(--ink-hint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 300; }

/* TEMPLATES */
.template-bar { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.template-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px 5px 10px; background: var(--green-wash); border: 1.5px solid rgba(29,158,117,0.3); border-radius: var(--r-pill); font-size: 11px; color: var(--green-dark); font-weight: 500; white-space: nowrap; }
.template-chip .t-name { cursor: pointer; }
.template-chip .t-del { background: none; border: none; color: var(--ink-hint); cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; font-family: monospace; }
.template-chip .t-del:hover { color: var(--red); }
.save-tpl-btn { background: none; border: none; font-size: 10px; color: var(--ink-hint); cursor: pointer; font-family: 'Poppins', sans-serif; display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; margin-top: 4px; font-weight: 400; }
.save-tpl-btn:hover { color: var(--green-dark); }

/* FAVOURITE STAR */
.star-btn { background: none; border: 1.5px solid var(--cream-border); border-radius: var(--r-pill); cursor: pointer; font-size: 12px; padding: 2px 7px; color: var(--ink-hint); line-height: 1; transition: all 0.15s; flex-shrink: 0; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; gap: 3px; font-family: 'Poppins', sans-serif; font-weight: 500; margin-bottom: 5px; }
.star-btn::before { content: '☆'; font-size: 13px; }
.star-btn.starred { color: #b8860b; border-color: #d4a017; background: #fffbef; }
.star-btn.starred::before { content: '★'; }
.star-btn:hover { border-color: var(--ink-light); color: var(--ink); }
.star-btn:active { transform: scale(0.95); }

/* TOOLTIPS */
.tooltip-wrap { position: relative; display: inline-flex; align-items: center; }
.tooltip-icon { font-size: 12px; color: var(--ink-hint); cursor: help; line-height: 1; }
.tooltip-text { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 6px); background: var(--ink); color: white; font-size: 10px; font-weight: 400; padding: 6px 10px; border-radius: var(--r); width: 200px; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 500; line-height: 1.4; white-space: normal; }
.tooltip-text::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ink); }
.tooltip-wrap:hover .tooltip-text, .tooltip-text.tt-show { opacity: 1; pointer-events: none; }

/* SWAP + LOCATE */
.locate-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 15px; color: var(--ink-hint); padding: 3px; line-height: 1; transition: color 0.15s; }
.locate-btn:hover { color: var(--green); }
.locate-btn.spinning i { display: inline-block; animation: spin 1s linear infinite; }
.field-input.with-action { padding-right: 34px; }
.swap-row { display: flex; justify-content: flex-end; margin: -1px 0 1px; }
.swap-btn { background: none; border: none; cursor: pointer; font-size: 14px; color: var(--ink-hint); padding: 2px 4px; line-height: 1; transition: color 0.15s, transform 0.2s; -webkit-tap-highlight-color: transparent; }
.swap-btn:hover { color: var(--green); transform: rotate(180deg); }

/* ROUND TRIP */
.round-trip-row { display: flex; align-items: center; gap: 7px; margin-top: 8px; cursor: pointer; user-select: none; }
.round-trip-row input[type=checkbox] { accent-color: var(--green); width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; }
.round-trip-row span { font-size: 11px; color: var(--ink-mid); }

/* CAFÉ OPTIONS */
.cafe-options { display: none; padding: 8px 12px 10px; border-top: 1px dashed var(--cream-border-light); flex-direction: column; gap: 7px; background: var(--cream); }
.cafe-options.visible { display: flex; }
.cafe-opt-row { display: flex; align-items: center; justify-content: space-between; }
.cafe-opt-label { font-size: 11px; color: var(--ink-mid); }
.cafe-opt-select { background: white; border: 1.5px solid var(--cream-border); border-radius: var(--r); padding: 4px 8px; font-size: 11px; font-family: 'Poppins', sans-serif; color: var(--ink); cursor: pointer; outline: none; }
.cafe-opt-select:focus { border-color: var(--green); }

/* SHOP ACCORDION TOGGLE */
.shop-toggle { background: none; border: none; cursor: pointer; font-size: 10px; color: var(--ink-hint); font-family: 'Poppins', sans-serif; display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; margin-top: 5px; -webkit-tap-highlight-color: transparent; }
.shop-toggle:hover { color: var(--green-dark); }
.shop-chev { transition: transform 0.2s; font-size: 11px; }
.shop-chev.open { transform: rotate(180deg); }

/* SHOPPING LIST */
.shop-wrap { margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--cream-border-light); }
.shop-item { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.shop-item input[type=checkbox] { accent-color: var(--green); width: 13px; height: 13px; flex-shrink: 0; cursor: pointer; }
.shop-text { font-size: 11px; color: var(--ink-mid); flex: 1; font-weight: 400; }
.shop-text.done { text-decoration: line-through; opacity: 0.45; }
.shop-del { background: none; border: none; color: var(--cream-border); cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; }
.shop-del:hover { color: var(--red); }
.shop-add-row { display: flex; gap: 5px; margin-top: 5px; }
.shop-add-row input { flex: 1; background: var(--cream); border: 1.5px solid var(--cream-border); border-radius: var(--r); padding: 5px 8px; font-size: 12px; color: var(--ink); font-family: 'Poppins', sans-serif; outline: none; min-width: 0; }
.shop-add-row input:focus { border-color: var(--green); }
.shop-add-row button { padding: 5px 10px; background: var(--green-wash); border: 1.5px solid rgba(29,158,117,0.3); border-radius: var(--r); color: var(--green-dark); font-size: 11px; cursor: pointer; font-family: 'Poppins', sans-serif; font-weight: 500; }
.shop-add-row button:hover { background: rgba(29,158,117,0.18); }

/* ONBOARDING MODAL */
.onboard-overlay { position: fixed; inset: 0; background: rgba(15,26,20,0.75); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(4px); }
.onboard-modal { background: var(--cream); border-radius: 16px; padding: 32px 24px 28px; width: 100%; max-width: 400px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
.onboard-logo { margin: 0 auto 20px; }
.onboard-title { font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.4px; }
.onboard-sub { font-size: 13px; color: var(--ink-light); margin-bottom: 24px; line-height: 1.55; font-weight: 300; }
.onboard-label { font-size: 12px; font-weight: 700; color: var(--ink-light); text-transform: uppercase; letter-spacing: 0.1em; text-align: left; margin-bottom: 7px; display: block; }
.onboard-current { display: flex; align-items: center; gap: 7px; text-align: left; font-size: 12px; color: var(--ink-light); margin-bottom: 16px; }
.onboard-current i { font-size: 15px; color: var(--green); }
.onboard-round { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; user-select: none; }
.onboard-round input { accent-color: var(--green); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.onboard-round span { font-size: 10px; color: var(--ink-mid); line-height: 1.4; }
#onboardDestWrap.hide { display: none; }
.onboard-input-wrap { position: relative; margin-bottom: 10px; }
.onboard-input-wrap .field-icon { color: var(--green); }
.onboard-btn { width: 100%; padding: 13px; background: var(--green); color: white; border: none; border-radius: var(--r-pill); font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.15s, transform 0.1s; box-shadow: var(--shadow); }
.onboard-btn:hover { background: var(--green-dark); transform: translate(-1px,-1px); }
.onboard-skip { margin-top: 12px; background: none; border: none; font-size: 11px; color: var(--ink-hint); cursor: pointer; font-family: 'Poppins', sans-serif; }
.onboard-skip:hover { color: var(--ink-light); }

/* INLINE SWAP BUTTON */
.route-fields-outer { position: relative; padding-right: 44px; }
.route-swap-inline { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--cream-border); background: white; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-light); box-shadow: var(--shadow); transition: all 0.15s; z-index: 2; }
.route-swap-inline i { font-size: 16px; }
.route-swap-inline:hover { border-color: var(--green); color: var(--green-dark); background: var(--green-wash); }

/* CATEGORY BUTTONS */
/* CATEGORY TILES */
.cat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 12px; }
.cat-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 11px 4px; border: 1.5px dashed var(--cream-border); border-radius: var(--r); background: white; cursor: pointer; color: var(--ink-light); font-family: 'Poppins', sans-serif; transition: all 0.15s; -webkit-tap-highlight-color: transparent; }
.cat-btn i { font-size: 19px; }
.cat-btn .cat-lbl { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.cat-btn i { color: var(--cc-fg, var(--ink-light)); }
.cat-btn:hover { border-color: var(--cc-bd, var(--ink-light)); }
.cat-btn.active { border-style: solid; border-color: var(--cc-bd, var(--green)); color: var(--cc-fg, var(--green-dark)); background: var(--cc-bg, var(--green-wash)); }

/* SELECTED STOPS — compact pills, colour-coded by category */
.selected-stops { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.selected-stops:empty { display: none; }
.selected-stop-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 10px; border: 1.5px solid var(--cc-bd,var(--green)); border-radius: var(--r-pill); background: var(--cc-bg,var(--green-wash)); }
.selected-stop-chip .ss-icon { color: var(--cc-fg,var(--green-dark)); font-size: 13px; flex-shrink: 0; }
.selected-stop-chip .ss-name { font-size: 11px; font-weight: 600; color: var(--cc-fg,var(--green-dark)); white-space: nowrap; }
.selected-stop-chip .ss-remove { background: none; border: none; cursor: pointer; color: var(--cc-fg,var(--green-dark)); opacity: 0.5; font-size: 15px; padding: 0; line-height: 1; flex-shrink: 0; }
.selected-stop-chip .ss-remove:hover { opacity: 1; color: var(--red); }
/* category colour themes */
.cc-food       { --cc-bg:#fdf0e6; --cc-bd:#e9b483; --cc-fg:#b3621b; }
.cc-fuel       { --cc-bg:#e8f1fb; --cc-bd:#9cc3ea; --cc-fg:#2f6db0; }
.cc-store      { --cc-bg:var(--green-wash); --cc-bd:#9bd3bf; --cc-fg:var(--green-dark); }
.cc-attraction { --cc-bg:#f3ecfb; --cc-bd:#c3a8e6; --cc-fg:#7a4fb0; }
.cc-services   { --cc-bg:#fbeef4; --cc-bd:#e6a8c8; --cc-fg:#a83f74; }
.cc-address    { --cc-bg:#eeeae3; --cc-bd:#c8bfaa; --cc-fg:#6b6354; }
/* quick stops */
.quick-line { font-size: 11px; color: var(--ink-light); margin-bottom: 9px; line-height: 1.5; }
.quick-adds { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.quick-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1.5px dashed var(--cream-border); border-radius: var(--r-pill); background: white; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 500; color: var(--ink-mid); cursor: pointer; transition: all 0.15s; -webkit-tap-highlight-color: transparent; }
.quick-chip i { font-size: 13px; color: var(--cc-fg, var(--green)); }
.quick-chip:hover { border-style: solid; border-color: var(--cc-bd, var(--green)); color: var(--cc-fg, var(--green-dark)); background: var(--cc-bg, var(--green-wash)); }
/* selected quick chip — solid fill, clearly distinct from outline pills */
.quick-chip.active { border-style: solid; border-color: var(--cc-fg, var(--green)); background: var(--cc-fg, var(--green)); color: #fff; }
.quick-chip.active i { color: #fff; }

/* search-mode toggle link */
.mode-link { color: var(--green-dark); font-weight: 600; cursor: pointer; text-decoration: underline; -webkit-tap-highlight-color: transparent; }
.mode-link:hover { color: var(--green); }

/* find-any toggle (in priorities list) */
.sp-anytoggle { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; padding: 3px 8px; border-radius: var(--r-pill); border: 1.5px solid var(--cream-border); transition: all 0.15s; background: white; }
.sp-anytoggle span { font-size: 9.5px; font-weight: 600; color: var(--ink-hint); white-space: nowrap; }
.sp-anytoggle i { font-size: 12px; color: var(--ink-hint); }
.sp-anytoggle.on { border-color: var(--green); background: var(--green-wash); }
.sp-anytoggle.on span, .sp-anytoggle.on i { color: var(--green-dark); }
.sp-subrow { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.sp-subrow .sp-anytoggle { margin-top: 0; }
.sp-when { font-family: 'Poppins', sans-serif; font-size: 9.5px; font-weight: 600; color: var(--green-dark); background: var(--green-wash); border: 1.5px solid var(--green); border-radius: var(--r-pill); padding: 3px 8px; cursor: pointer; outline: none; }

/* GOOGLE AUTOCOMPLETE */
.pac-container { background: white; border: 1.5px solid var(--cream-border); border-radius: var(--r); box-shadow: 4px 4px 0 rgba(0,0,0,0.06); font-family: 'Poppins', sans-serif; margin-top: 3px; z-index: 5000; }
.pac-item { padding: 8px 12px; font-size: 12px; cursor: pointer; border-top: 1px dashed var(--cream-border-light); color: var(--ink-mid); }
.pac-item:first-child { border-top: none; }
.pac-item:hover { background: var(--cream); }
.pac-item-query { font-size: 12px; color: var(--ink); font-weight: 500; }
.pac-matched { color: var(--green-dark); font-weight: 600; }
.pac-icon { display: none; }

/* MAP */
#map { position: absolute; inset: 0; background: #eef2eb; }
.map-wrap { position: relative; flex: 1; min-height: 0; }
main { display: flex; flex-direction: column; }
.map-brand { position: absolute; bottom: 16px; left: 16px; z-index: 5; display: flex; align-items: center; gap: 7px; background: rgba(245,240,232,0.92); padding: 6px 12px; border-radius: var(--r-pill); pointer-events: none; border: 1.5px solid var(--cream-border); box-shadow: 2px 2px 0 rgba(0,0,0,0.08); }
.map-brand span { font-size: 11px; font-weight: 700; color: var(--green-dark); font-family: 'Poppins', sans-serif; }

/* DESKTOP PREFS ACCORDION */
.desktop-prefs-btn { display: none; } /* hidden on mobile — prefs tab handles it */
@media (min-width: 721px) {
  .desktop-prefs-btn { display: flex; align-items: center; gap: 5px; width: 100%; padding: 0; margin-top: 10px; background: none; border: none; font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 400; color: var(--ink-hint); cursor: pointer; transition: color 0.15s; }
  .desktop-prefs-btn:hover { color: var(--ink-light); }
  .desktop-prefs-btn .dp-chev { margin-left: auto; transition: transform 0.2s; font-size: 11px; }
  .desktop-prefs-btn.open { color: var(--ink-light); }
  .desktop-prefs-btn.open .dp-chev { transform: rotate(180deg); }
  /* Route preferences only on the final (stops) step */
  .layout:not([data-step="3"]) .desktop-prefs-btn { display: none; }
  /* Prefs sections hidden on desktop until toggled, and only on step 3 */
  .sidebar:not(.prefs-desktop-open) .prefs-only,
  .layout:not([data-step="3"]) .prefs-only { display: none; }
}

/* STEP WIZARD */
.step-nav { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 1rem; }
.step-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 10px 6px;
  border: 1.5px dashed var(--cream-border); border-radius: var(--r);
  background: white; font-family: 'Poppins', sans-serif;
  color: var(--ink-hint); opacity: 0.55; cursor: not-allowed;
  transition: all 0.15s; -webkit-tap-highlight-color: transparent;
}
.step-btn i { font-size: 18px; }
.step-btn .step-lbl { font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.step-btn.accessible { opacity: 1; cursor: pointer; }
.step-btn.accessible:hover { border-color: var(--ink-light); color: var(--ink); }
.step-btn.active { border-style: solid; border-color: var(--ink); color: var(--ink); background: var(--cream-dark); opacity: 1; cursor: default; }
.step-btn.done { border-style: solid; border-color: var(--green); color: var(--green-dark); background: var(--green-wash); opacity: 1; cursor: pointer; }
.step-btn.done i::after { content: ' ✓'; font-size: 9px; }

/* Step panels — directional slide */
.step-panel { display: none; }
.step-panel.active { display: block; }
.step-panel.slide-in-right { animation: slideInRight 0.28s cubic-bezier(0.22,0.61,0.36,1); }
.step-panel.slide-in-left  { animation: slideInLeft 0.28s cubic-bezier(0.22,0.61,0.36,1); }
@keyframes revealIn   { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideInRight { from { opacity:0; transform:translateX(28px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideInLeft  { from { opacity:0; transform:translateX(-28px); } to { opacity:1; transform:translateX(0); } }

/* TOAST NOTIFICATIONS */
.toast-stack { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 4000; display: flex; flex-direction: column; gap: 8px; width: calc(100% - 32px); max-width: 420px; pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r); font-size: 12px; line-height: 1.45; font-weight: 500; box-shadow: 0 8px 28px rgba(0,0,0,0.18); pointer-events: auto; animation: toastIn 0.28s cubic-bezier(0.22,0.61,0.36,1); }
.toast.leaving { animation: toastOut 0.22s ease forwards; }
.toast i.toast-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.toast .toast-body { flex: 1; min-width: 0; }
.toast .toast-close { background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; padding: 0; opacity: 0.5; flex-shrink: 0; color: inherit; font-family: monospace; }
.toast .toast-close:hover { opacity: 1; }
.toast.error { background: #fff5f5; border: 1.5px solid #f0b8b8; color: #b23b3b; }
.toast.error i.toast-icon { color: #d65555; }
.toast.warn  { background: #fffbf0; border: 1.5px solid #f0d890; color: #97791f; }
.toast.warn i.toast-icon { color: #d4a017; }
.toast.info  { background: var(--green-wash); border: 1.5px solid rgba(29,158,117,0.35); color: var(--green-dark); }
.toast.info i.toast-icon { color: var(--green); }
.toast .toast-action { display: inline-block; margin-top: 6px; background: none; border: none; padding: 0; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; color: inherit; cursor: pointer; text-decoration: underline; }
@keyframes toastIn  { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-12px); } }

/* Route breadcrumb (steps 2 & 3) */
.route-breadcrumb { display: flex; align-items: center; gap: 7px; padding: 9px 12px; margin-bottom: 22px; background: var(--cream-dark); border: 1.5px solid var(--cream-border); border-radius: var(--r); cursor: pointer; transition: border-color 0.15s; font-size: 11px; color: var(--ink-mid); -webkit-tap-highlight-color: transparent; }
.route-breadcrumb:hover { border-color: var(--green); }
.route-breadcrumb .bc-pin { color: var(--green); font-size: 13px; flex-shrink: 0; }
.route-breadcrumb .bc-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.route-breadcrumb .bc-edit { color: var(--ink-hint); font-size: 13px; flex-shrink: 0; }
.route-breadcrumb .bc-arrow { color: var(--ink-hint); flex-shrink: 0; }

/* Round-trip destination collapse animation */
#destWrap { overflow: hidden; transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease; max-height: 60px; opacity: 1; }
#destWrap.collapsed { max-height: 0; opacity: 0; margin: 0 !important; pointer-events: none; }


/* TAB BAR — hidden on desktop */
.tab-bar { display: none; }

/* ── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
  html { height: 100%; }
  body {
    height: 100vh; height: 100svh;
    min-height: -webkit-fill-available;
    display: flex; flex-direction: column;
    overflow: hidden; overscroll-behavior: none;
  }
  .layout { display: block; flex: 1; min-height: 0; position: relative; overflow: hidden; }

  .sidebar { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-right: none; }
  .sidebar::-webkit-scrollbar { display: none; }
  main { position: absolute; inset: 0; display: none; flex-direction: column; }

  .layout[data-tab="map"] .sidebar { display: none; }
  .layout[data-tab="map"] main { display: flex; }
  .prefs-only { display: none; }
  .layout[data-tab="prefs"] .plan-only { display: none; }
  .layout[data-tab="prefs"] .prefs-only { display: block; }

  .sidebar-inner { padding-bottom: 2rem; }

  /* TAB BAR */
  .tab-bar {
    display: flex; flex-shrink: 0;
    background: var(--cream); border-top: 1.5px dashed var(--cream-border);
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 100;
  }
  .tab-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: none; color: var(--ink-hint);
    font-family: 'Poppins', sans-serif; font-size: 9px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
    transition: color 0.15s; -webkit-tap-highlight-color: transparent; position: relative;
  }
  .tab-btn i { font-size: 20px; }
  .tab-btn.active { color: var(--green-dark); }
  .tab-badge { position: absolute; top: 6px; left: calc(50% + 6px); width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: none; }
  .tab-badge.visible { display: block; }

  /* TOUCH TARGETS */
  .store-chip { padding: 11px 10px; min-height: 44px; font-size: 12px; }
  .pref-row   { padding: 13px 12px; min-height: 48px; }
  .go-btn     { font-size: 15px; padding: 15px; min-height: 52px; }

  /* PREVENT iOS ZOOM — inputs must be ≥16px, but wrap in scaler to keep visual size consistent */
  .field-input, .store-input-wrap input, .time-card input, .time-card select,
  .sp-time-input, .shop-add-row input, .cafe-opt-select, .fb-textarea { font-size: 16px; }
  /* Scale selects down visually so they match surrounding text */
  .cafe-opt-select { font-size: 16px; transform: scale(0.8); transform-origin: right center; }
  .cafe-opt-label { font-size: 13px; }
  .time-card input { text-align: left; }
  /* Consistent label sizes in special stops */
  .special-stop-label { font-size: 14px; }

  /* MOBILE READABILITY — scale general text up toward the 16px inputs */
  body { font-size: 15px; }
  .sec-label { font-size: 15px; }
  .quick-line, .hint, .store-add-hint, .dur-desc, .dur-derived,
  .cafe-opt-label, .cafe-opt-row, .round-trip-row span { font-size: 13.5px; }
  .time-q, .madlib { font-size: 15px; }
  .madlib-select { font-size: 16px; }              /* also stops iOS select-zoom */
  .madlib-colon { font-size: 15px; }
  .dur-big { font-size: 13.5px; }
  .time-mode button { font-size: 13px; }
  .nolimit { font-size: 14px; }
  .step-next-btn { font-size: 14px; }
  .save-tpl-btn, .reset-lists-btn { font-size: 12px; }
  .store-chip, .quick-chip, .selected-stop-chip .ss-name,
  .recent-route, .recent-meta, .template-chip { font-size: 13px; }
  .sp-name { font-size: 13px; }
  .sp-time, .sp-anytoggle span, .priority-toggle button { font-size: 12px; }
  .route-breadcrumb { font-size: 13px; }
  .stop-name-r { font-size: 14px; }
  .stop-addr-r { font-size: 11.5px; }
  .pref-label { font-size: 13.5px; }
  .fb-type, .fb-shot-btn { font-size: 13px; }
  .fb-sub { font-size: 13.5px; }

  /* BIGGER TOGGLES */
  .toggle { width: 40px; height: 22px; border-radius: 11px; }
  .toggle::after { width: 18px; height: 18px; top: 2px; left: 2px; }
  .toggle.on::after { left: 20px; }

  /* STATS 2-col */
  .stats-row { grid-template-columns: repeat(2, 1fr); }

  /* RESULTS bottom sheet */
  .results-panel { max-height: 52%; border-top: none; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 16px rgba(0,0,0,0.10); }

  .map-brand { display: none; }
}

/* ── FEEDBACK ───────────────────────────────────────────────── */
.feedback-fab { position: fixed; right: 16px; bottom: 16px; z-index: 2500; display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--ink); color: #fff; border: none; border-radius: var(--r-pill); font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.22); transition: transform 0.12s, background 0.15s; -webkit-tap-highlight-color: transparent; }
.feedback-fab:hover { background: #000; transform: translateY(-1px); }
.feedback-fab i { font-size: 16px; }
@media (max-width: 720px) {
  .feedback-fab { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); right: 12px; padding: 9px 12px; }
  .feedback-fab span { display: none; } /* icon-only above the tab bar */
}

.fb-overlay { position: fixed; inset: 0; background: rgba(15,26,20,0.7); z-index: 3500; display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); }
.fb-modal { position: relative; background: var(--cream); border-radius: 16px; padding: 24px 22px 22px; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }

/* On mobile, keep equal margins all sides (incl. notch/safe areas) so modals don't hit the edges */
@media (max-width: 720px) {
  .fb-overlay, .onboard-overlay {
    padding: 18px;
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .fb-modal, .onboard-modal {
    max-height: calc(100dvh - 36px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }
}
.fb-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 22px; line-height: 1; color: var(--ink-hint); cursor: pointer; font-family: monospace; }
.fb-close:hover { color: var(--ink); }
.fb-title { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.fb-sub { font-size: 12px; color: var(--ink-light); margin-bottom: 18px; line-height: 1.5; font-weight: 300; }
.fb-types { display: flex; gap: 6px; }
.fb-type { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border: 1.5px dashed var(--cream-border); border-radius: var(--r); background: white; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; color: var(--ink-light); cursor: pointer; transition: all 0.15s; -webkit-tap-highlight-color: transparent; }
.fb-type i { font-size: 18px; }
.fb-type.active { border-style: solid; border-color: var(--green); background: var(--green-wash); color: var(--green-dark); }
.fb-textarea { width: 100%; min-height: 90px; resize: vertical; background: white; border: 1.5px solid var(--cream-border); border-radius: var(--r); padding: 10px 12px; font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--ink); outline: none; }
.fb-textarea:focus { border-color: var(--green); }
.fb-shot-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-shot-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border: 1.5px solid var(--cream-border); border-radius: var(--r-pill); background: white; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 500; color: var(--ink-mid); cursor: pointer; transition: all 0.15s; }
.fb-shot-btn:hover { border-color: var(--green); color: var(--green-dark); }
.fb-shot-btn i { font-size: 13px; color: var(--green); }
.fb-shot-name { font-size: 11px; color: var(--ink-hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.fb-submit { width: 100%; margin-top: 18px; padding: 12px; background: var(--green); color: #fff; border: none; border-radius: var(--r-pill); font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.15s, transform 0.1s; box-shadow: var(--shadow); }
.fb-submit:hover:not(:disabled) { background: var(--green-dark); transform: translate(-1px,-1px); }
.fb-submit:disabled { background: var(--cream-border); color: var(--ink-hint); cursor: not-allowed; box-shadow: none; }
.fb-status { font-size: 12px; margin-top: 10px; text-align: center; line-height: 1.5; min-height: 1em; }
.fb-status.ok { color: var(--green-dark); font-weight: 600; }
.fb-status.err { color: var(--red); }