/* FREE SAILING — time and place strips (fs-time-place.js).
   Mobile first: each strip is one segmented row that fits a 360px phone without
   scrolling (When ~310px, Where ~265px at 13px). Side by side from 760px. */
.fs-tp{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin:0 0 14px; }
@media (min-width:760px){ .fs-tp{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px 14px; } }

.fs-tp-seg{ display:inline-flex; align-items:center; gap:2px; max-width:100%;
  padding:3px; border:1px solid var(--line,#DCE3EC); border-radius:999px; background:var(--pale,#F4F7FB);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.fs-tp-seg::-webkit-scrollbar{ display:none; }

.fs-tp-b{ appearance:none; -webkit-appearance:none; flex:0 0 auto; position:relative;
  display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:0 12px;
  border:0; border-radius:999px; background:transparent; color:var(--ink-60,#3A4A63);
  font:inherit; font-size:13.5px; font-weight:600; line-height:1; white-space:nowrap;
  cursor:pointer; touch-action:manipulation;
  transition:background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.fs-tp-b:hover{ color:var(--navy,#022B83); background:#fff; }
.fs-tp-b.is-on{ background:var(--navy,#022B83); color:#fff; box-shadow:0 1px 3px rgba(2,43,131,.22); }
.fs-tp-b:focus-visible{ outline:2px solid var(--cyan,#00A3E0); outline-offset:1px; }
.fs-tp-b.is-busy{ color:transparent; }
.fs-tp-b.is-busy::after{ content:""; position:absolute; left:50%; top:50%; width:14px; height:14px;
  margin:-7px 0 0 -7px; border-radius:50%; border:2px solid var(--navy,#022B83); border-right-color:transparent;
  animation:fs-tp-spin .7s linear infinite; }
.fs-tp-b.is-on.is-busy::after{ border-color:#fff; border-right-color:transparent; }
@keyframes fs-tp-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .fs-tp-b{ transition:none; } .fs-tp-b.is-busy::after{ animation:none; } }

/* "My country" once on: the country's name, a caret, and a native select on top of it. */
.fs-tp-cwrap{ position:relative; display:inline-flex; flex:0 0 auto; }
.fs-tp-csel{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
  font-size:16px; /* 16px stops iOS zooming the page when the picker opens */ }
.fs-tp-cwrap:focus-within .fs-tp-b{ outline:2px solid var(--cyan,#00A3E0); outline-offset:1px; }
.fs-tp-caret{ width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; margin-left:1px; }

.fs-tp-note{ flex-basis:100%; margin:0; font-size:12.5px; color:var(--ink-40,#667085); }

@media (max-width:374px){ .fs-tp-b{ padding:0 10px; font-size:13px; } }

/* A filter that arrived from a link or the resident with no strip of its own
   (a region on events, a kind on ways in): shown, and one tap takes it off. */
.fs-tp-chip{ appearance:none; -webkit-appearance:none; display:inline-flex; align-items:center; gap:6px;
  min-height:36px; padding:0 12px; border:1px solid var(--navy,#022B83); border-radius:999px;
  background:#EEF3FB; color:var(--navy,#022B83); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.fs-tp-chip:hover{ background:#fff; }
.fs-tp-chip:focus-visible{ outline:2px solid var(--cyan,#00A3E0); outline-offset:2px; }

/* distance on a card when "Near me" is on */
.ev-km,.fs-km{ color:var(--navy,#022B83); font-weight:700; font-variant-numeric:tabular-nums; }

/* Space held for the strips while the page's data loads, so the list does not jump. */
.fs-tp-slot:empty{ min-height:94px; margin-bottom:14px; }
@media (min-width:760px){ .fs-tp-slot:empty{ min-height:44px; } }
.fs-tp-slot-1:empty{ min-height:44px; }
.sp-rail > .fs-tp{ margin:0; }