/* Location filter — styles for location-filter.js (see README.md).
   Self-contained: every colour and font comes from a --lf-* token the site
   sets on :root from its own palette; the fallbacks are a neutral light look.

   :root {
     --lf-accent: #c4f13d;   --lf-accent-ink: #0d0f10;  --lf-accent-hover: #d6ff5c;
     --lf-ink: #f2f4f5;      --lf-muted: #a7adb3;       --lf-dim: #6b7278;
     --lf-line: #22262a;     --lf-line-strong: #3a4046; --lf-surface: #15181a;
     --lf-alert: #ff6b6b;    --lf-alert-bg: rgba(255,107,107,.1);
     --lf-mono: 'Geist Mono', monospace;  --lf-sans: 'Geist', sans-serif;
     --lf-radius: 13px;
   } */

/* ---- The rail under the search box ---- */
#loc-rail { margin-top: 12px; }
#loc-rail.hidden, #loc-token.hidden, #loc-editor.hidden, #loc-help .hidden, #loc-restore.hidden, #loc-undo.hidden { display: none; }
.loc-row { display: flex; align-items: center; gap: 12px; }
.loc-label {
  flex-shrink: 0;
  font: 500 11px/1 var(--lf-mono, ui-monospace, monospace);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lf-dim, #6b7280);
}
#loc-chips {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 8px;
  padding: 4px 0;      /* keeps the focus ring inside the clipped rail */
  margin: -4px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#loc-chips::-webkit-scrollbar { display: none; }
#loc-chips > * { flex-shrink: 0; }

/* ---- Chips ---- */
.loc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--lf-line-strong, #d1d5db);
  background: transparent;
  color: var(--lf-muted, #4b5563);
  font: 500 13px/1 var(--lf-mono, ui-monospace, monospace);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.loc-chip:hover { border-color: var(--lf-ink, #111827); color: var(--lf-ink, #111827); }
.loc-chip[aria-pressed="true"], .loc-chip.is-active {
  background: var(--lf-accent, #111827);
  border-color: var(--lf-accent, #111827);
  color: var(--lf-accent-ink, #ffffff);
}
.loc-chip[aria-pressed="true"]:hover { background: var(--lf-accent-hover, var(--lf-accent, #111827)); }
.loc-chip .loc-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; text-transform: lowercase; }
.loc-chip .loc-hint { font: 600 10px/1 var(--lf-mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.loc-chip svg { display: none; width: 13px; height: 13px; }
.loc-chip-add { border-style: dashed; color: var(--lf-dim, #6b7280); }
/* Edit mode: every chip is a remove target, the pressed one keeps its fill. */
#loc-rail.is-editing .loc-chip { border-color: var(--lf-line-strong, #d1d5db); color: var(--lf-ink, #111827); }
#loc-rail.is-editing .loc-chip.is-active { border-color: var(--lf-accent, #111827); background: var(--lf-accent, #111827); color: var(--lf-accent-ink, #fff); }
#loc-rail.is-editing .loc-chip svg { display: block; }
#loc-rail.is-editing .loc-chip:hover { border-color: var(--lf-alert, #dc2626); color: var(--lf-alert, #dc2626); background: var(--lf-alert-bg, rgba(220, 38, 38, .08)); }

/* ---- Small text buttons: edit / done, undo, restore ---- */
.loc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--lf-muted, #4b5563);
  font: 500 13px/1 var(--lf-sans, system-ui, sans-serif);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.loc-btn:hover { color: var(--lf-ink, #111827); }
.loc-btn.hidden { display: none; }

/* ---- The add-a-place editor ---- */
#loc-editor { margin-top: 12px; max-width: 480px; }
.loc-editor-box {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 6px 0 14px;
  border-radius: var(--lf-radius, 13px);
  border: 1px solid var(--lf-line-strong, #d1d5db);
  background: var(--lf-surface, #fff);
  transition: border-color .15s, box-shadow .15s;
}
.loc-editor-box:focus-within { border-color: var(--lf-accent, #111827); }
.loc-editor-box > svg { width: 17px; height: 17px; color: var(--lf-dim, #6b7280); flex-shrink: 0; }
.loc-editor-box input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--lf-ink, #111827);
  font: 400 15px/1 var(--lf-mono, ui-monospace, monospace);
}
.loc-editor-box input::placeholder { color: var(--lf-dim, #6b7280); }
.loc-editor-box input[aria-invalid="true"] { color: var(--lf-alert, #dc2626); }
.loc-editor-box .loc-add {
  height: 38px;
  padding: 0 16px;
  border-radius: 9px;
  border: 1px solid var(--lf-accent, #111827);
  background: var(--lf-accent, #111827);
  color: var(--lf-accent-ink, #fff);
  font: 500 14px/1 var(--lf-sans, system-ui, sans-serif);
  cursor: pointer;
}
#loc-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin: 8px 0 0;
  font: 400 12px/1.5 var(--lf-mono, ui-monospace, monospace);
  color: var(--lf-dim, #6b7280);
}
#loc-help.is-error { color: var(--lf-alert, #dc2626); }
#loc-help .loc-btn { height: 30px; padding: 0 8px; font: 500 12px/1 var(--lf-mono, ui-monospace, monospace); }

/* ---- One saved place: a scope token inside the search box ----
   (name + hint to toggle, a chevron to open the rail editor); the rail below
   is hidden. Any other count, a linked place, or editing uses the rail. */
.search-box.has-loc-token > svg { display: none; }
.search-box.has-loc-token input { flex: 1 1 96px; min-width: 96px; }
.loc-token {
  display: inline-flex;
  align-items: stretch;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 220px;    /* long names ellipsize; the phone cap is tighter, below */
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--lf-line-strong, #d1d5db);
  color: var(--lf-muted, #4b5563);
  font: 500 13px/1 var(--lf-mono, ui-monospace, monospace);
  transition: border-color .15s, color .15s, background-color .15s;
}
.loc-token:hover { color: var(--lf-ink, #111827); }
.loc-token.is-on { background: var(--lf-accent, #111827); border-color: var(--lf-accent, #111827); color: var(--lf-accent-ink, #fff); }
.loc-token.is-on:hover { background: var(--lf-accent-hover, var(--lf-accent, #111827)); color: var(--lf-accent-ink, #fff); }
.loc-token > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.loc-token > button::before { content: ''; position: absolute; inset: -7px 0; }  /* 50px-tall hit box */
/* Child selectors on purpose: they must outrank the button reset above, which
   zeroes padding, and a site's own `.search-box button { flex: … }` rules. */
.loc-token > .loc-token-pick { flex: 1 1 auto; height: auto; gap: 6px; padding: 0 9px 0 14px; min-width: 64px; border-radius: 999px 0 0 999px; }
.loc-token .loc-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: lowercase; }
.loc-token .loc-hint { flex-shrink: 0; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 10px/1 var(--lf-mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.loc-token > .loc-token-edit { flex: 0 0 36px; height: auto; width: 36px; justify-content: center; border-left: 1px solid var(--lf-line-strong, #d1d5db); border-radius: 0 999px 999px 0; }
.loc-token.is-on > .loc-token-edit { border-left-color: rgba(0, 0, 0, .25); }
.loc-token-edit svg { width: 12px; height: 12px; }
.loc-token > .loc-token-edit::before { right: -8px; }  /* the hit box borrows the gap; must outrank .loc-token > button::before */

@media (max-width: 639px) {
  .loc-token { max-width: 136px; }  /* about "zurich CH": anything longer is cut with an ellipsis */
  .loc-token .loc-hint.is-long { display: none; }
  .search-box.has-loc-token { gap: 8px; padding-left: 8px; }
}
@media (max-width: 819px) {
  #loc-input { font-size: 16px; }  /* below 16px iOS zooms the page on focus */
}
@media (min-width: 820px) {
  #loc-chips { flex-wrap: wrap; overflow: visible; }
}