/* Canton > city > venue favorites picker, fully expanded. Mobile-first.
   Goal: a calm, scannable tree. Hierarchy reads from neutral left-rules + indent
   and a type step (canton bold > city > venue), NOT from colour. Venues flow into
   an aligned grid so a city with a dozen venues stays tidy instead of
   ragged-wrapping. */

.location-picker {
  display: flex;
  flex-direction: column;
  gap: var(--gap-medium);
}

/* The canton is the top level — flush left, no rule (the outer border added
   nothing; only the city > venue nesting needs a guide line). A neutral left-rule
   on the city conveys the one nesting step that matters. */
.loc-canton {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xsmall);
}

.loc-city {
  border-left: var(--tag-border-width) solid var(--border-color);
  margin-left: var(--gap-medium);
  padding-left: var(--gap-medium);
  margin-block: var(--gap-xsmall);
  display: flex;
  flex-direction: column;
  gap: var(--gap-xsmall);
}

/* A row: checkbox + name, vertically centred (was baseline, which left the box
   floating above the text). The whole label is the hit target. */
.loc-option {
  display: flex;
  align-items: center;
  gap: var(--gap-small);
  padding: var(--gap-xsmall) 0;
  cursor: pointer;
  min-width: 0;
}

.loc-option input {
  flex-shrink: 0;
}

.loc-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Canton + city heads share the base size; the venue grid steps down. */
.loc-canton-head,
.loc-city-head {
  font-size: var(--font-size-base);
}

.loc-other-head {
  margin: 0;
  padding: var(--gap-xsmall) 0;
}

/* Venues: auto-filling COLUMNS that read top-to-bottom (column-major), so a long
   list scans down each column in alphabetical order instead of snaking left to
   right. Multi-column (not grid) is what gives the vertical fill; break-inside
   keeps each label whole. Columns are wide enough for a venue name and collapse
   to one on narrow screens. */
.loc-venues {
  columns: 11rem auto;
  column-gap: var(--gap-medium);
}

.loc-venue {
  font-size: var(--font-size-small);
  break-inside: avoid;
}