/* ─────────────────────────────────────────────────────────────────────────────
   Parada segmented control — a single-choice option row on a light grey track,
   the chosen option filled navy.

   Used by the browse filters on /v1/parkings (Parking Type, Term) and
   /v1/comm/parkings (Term, Bay type), so the two pages' filters look the same.

     <div class="p-seg" role="group" aria-label="Term">
       <button type="button" class="p-seg-opt is-active" aria-pressed="true">Any</button>
       <button type="button" class="p-seg-opt" aria-pressed="false">Hourly</button>
     </div>

   Look only: each page keeps its own script, which marks the chosen option with
   .is-active (and aria-pressed="true") and writes the value to its hidden input.
   Options wrap onto a second line when the column is narrow, and stretch so
   every line stays full.
   ───────────────────────────────────────────────────────────────────────────── */

.p-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 3px;
  background: #f1f5f9;
  border-radius: 11px;
  box-sizing: border-box;
}

.p-seg .p-seg-opt {
  flex: 1 1 auto;
  margin: 0;
  padding: 8px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  /* #475569 on the #f1f5f9 track is 7:1 — the lighter slate the comm page used
     (#64748b) is 4.3:1, under AA for 12.5px text. */
  color: #475569;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .12s, color .12s, box-shadow .12s;
}

.p-seg .p-seg-opt:hover {
  background: rgba(31, 73, 125, .07);
  color: #1f497d;
}

.p-seg .p-seg-opt.is-active,
.p-seg .p-seg-opt[aria-pressed="true"] {
  background: #1f497d;
  color: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
}

.p-seg .p-seg-opt.is-active:hover,
.p-seg .p-seg-opt[aria-pressed="true"]:hover {
  background: #163a6b;
  color: #fff;
}

/* style.css sets `button:focus { outline: 0 !important }`, so the keyboard ring
   needs !important (and the higher specificity) to show at all. */
.p-seg .p-seg-opt:focus-visible {
  outline: 2px solid #1f497d !important;
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}