.table-responsive {
  container-type: inline-size;
  container-name: gridContainers;
}

/* 2. Set default width (acts like col-12) */
.custom-col {
  position: relative;
  width: 100%;
  padding-right: 5px;
  padding-left: 5px;
  flex: 0 0 100%;
  max-width: 100%;
}

/* 3. Apply changes based on the DIV's width, not the screen */
@container gridContainers (min-width: 600px) {
  .custom-col {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@container gridContainers (min-width: 900px) {
  .custom-col {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}
@container gridContainers (min-width: 1200px) {
  .custom-col {
    flex: 0 0 25%;
    max-width: 25%;
  }
}
.chatty-col-width{
  min-width:100px;
}

/* Town-sets card grid: make this the container for responsive column widths */
.town-sets-container {
  container-type: inline-size;
  container-name: gridContainers;
}

/* ── Town-Sets: Card Flip ──────────────────────────────────────────────── */

.town-flip-card {
  perspective: 1000px;
  height: 220px;   /* 100px photo + title + count + badges */
}

@media (max-width: 480px) {
  .town-flip-card { height: 220px; }
}

.town-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.45s ease;
  transform-style: preserve-3d;
}

.town-flip-card.is-flipped .town-flip-inner {
  transform: rotateY(180deg);
}

.town-flip-front,
.town-flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 6px;
  overflow: hidden;
}

/* Front face */
.town-flip-front {
  background-color: var(--chatty-card-bg, #F4F3F3);
  color: var(--chatty-card-font, #333);
  border: 1px solid rgba(0,0,0,0.125);
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}

/* Back face */
.town-flip-back {
  transform: rotateY(180deg);
  background-color: var(--chatty-card-bg, #F4F3F3);
  color: var(--chatty-card-font, #333);
  border: 1px solid rgba(0,0,0,0.125);
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}

/* Front preview items */
.town-card-preview {
  overflow: hidden;
}

.town-card-preview-item {
  font-size: 0.75rem;
  color: #555;
  border-top: 1px solid rgba(0,0,0,0.07);
  padding-top: 3px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Town-Sets: Expanded (flipped to full-width sub-cards) ─────────────── */

/* Expanding wrapper overrides container-query column widths */
.town-flip-wrapper.town-card-expanded {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Taller card to accommodate the sub-card grid on flip */
.town-flip-wrapper.town-card-expanded .town-flip-card {
  height: 600px;
}

@media (max-width: 480px) {
  .town-flip-wrapper.town-card-expanded .town-flip-card {
    height: 640px;
  }
}

/* ── Town-Sets: Active highlight (persists across view toggle) ─────────── */

/* Table view — left border accent + subtle background tint */
.town-hub-row.town-row-active {
  background-color: rgba(13, 110, 253, 0.12) !important;
  box-shadow: inset 3px 0 0 #0d6efd;
}

/* Card view — blue ring around the wrapper */
.town-flip-wrapper.town-card-active > .town-flip-card {
  box-shadow: 0 0 0 2px #0d6efd, 0 4px 12px rgba(13, 110, 253, 0.25);
}

/* ── Town-Sets: Table Accordion ───────────────────────────────────────── */

.town-hub-row td {
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* Ensure sub-table scrolls horizontally on narrow screens */
.town-sets-container .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-row td {
  padding: 10px 8px;
  vertical-align: middle;
}

/* ── Split Mode Layout ───────────────────────────────────────────────────────
   True 3-column flex: [list panel][divider][map panel]
   --divider-w : width of centre column (matched in JS as SPLIT_DIVIDER_W = 44)
   --panel-w   : set by JS = container width − divider-w/2  (creates peek effect)
   --split-panel-h : set by JS = viewport height below toolbar
   All rules scoped to .chatty-split-mode — zero impact on normal layout.
──────────────────────────────────────────────────────────────────────────── */

.chatty-split-mode {
  overflow: hidden;
  position: relative;
  --divider-w: 36px;
  --panel-w: 500px;       /* overwritten by JS after layout */
  --split-panel-h: 70vh;  /* overwritten by JS after layout */
}

/* 3-column track: 2 panels + 1 divider — total always = 2×panel-w + divider-w */
.chatty-split-track {
  display: flex;
  width: calc(var(--panel-w) * 2 + var(--divider-w));
  height: var(--split-panel-h);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.form-check-label {
	font-size:12px;
}
/* Slide transform is set entirely by JS (_slideSplit) via inline style.
   Default = show list, no offset. */
.chatty-split-mode .chatty-split-track { transform: translateX(0); }

/* List panel — scrollable column */
.chatty-split-left {
  flex: 0 0 var(--panel-w);
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding-right: 6px; /* keeps scrollbar clear of divider edge */
}

/* Map panel — fixed, Leaflet owns its own scroll/zoom */
.chatty-split-right {
  flex: 0 0 var(--panel-w);
  height: 100%;
  position: relative;
}

/* Divider — in-flow flex column, 44px wide, peeks over each panel edge by 22px */
.chatty-split-divider {
  flex: 0 0 var(--divider-w);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
  z-index: 10;
  background-color: var(--chatty-divider-color, rgb(18,28,52));
  border-left:  1px solid rgba(255,255,255,0.12);
  border-right: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 18px rgba(0,0,0,0.5);
  transition: filter 0.2s;
}

.chatty-split-divider:hover {
  filter: brightness(1.5);
}

/* Drag handle — vertical dot column */
.chatty-split-handle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  color: rgba(255,255,255,0.82);
}

.chatty-split-handle i { font-size: 14px; }

/* 6-dot drag indicator between the icons */
.chatty-split-drag-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  opacity: 0.45;
}
.chatty-split-drag-dots span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
}

/* Direction arrows */
.chatty-split-mode.split-map-active  .chatty-split-arrow-right { display: none; }
.chatty-split-mode:not(.split-map-active) .chatty-split-arrow-left  { display: none; }

/* Map fills its panel completely */
.chatty-split-mode .vhc-route-map {
  height: 100% !important;
  width:  100% !important;
  margin: 0   !important;
  border-radius: 4px;
}

/* Split toggle button active state */
.chatty-split-btn.active {
  background-color: rgba(99, 149, 255, 0.20) !important;
  border-color:     rgba(99, 149, 255, 0.55) !important;
  color: #aac4ff !important;
}

/* Top-5 show-more / show-less — hidden overflow items */
.chatty-collapsed { display: none !important; }
.chatty-more-row  { text-align: center; padding: 4px 0 8px; }
.chatty-show-more, .chatty-show-less { font-size: 0.75rem; opacity: 0.75; }
.chatty-show-more:hover, .chatty-show-less:hover { opacity: 1; }