/* Styles for PageTowns component */
.town-tree { display:block; margin-top:1rem; }
.state-paper { margin-bottom:0.75rem; padding:0.25rem; border-radius:8px; background:var(--mud-palette-surface); box-shadow:var(--mud-elevation-0); }
.state-header { display:flex; align-items:center; justify-content:space-between; padding:0.5rem 0.75rem; cursor:pointer; }
.state-title { font-weight:600; font-size:1rem; display:flex; align-items:center; gap:0.5rem; }
.town-list { list-style:none; margin:0; padding:0 0 0 0.5rem; }
.town-item { padding:0.25rem 0.5rem; display:flex; align-items:center; justify-content:space-between; }
.town-link { color:var(--mud-palette-text); text-decoration:none; display:block; width:100%; }
.town-link:hover { text-decoration:underline; }
.disabled-town { color:rgba(0,0,0,0.45); }
.toolbar { display:flex; gap:0.75rem; align-items:center; margin-bottom:0.75rem; }
.tiles { display:flex; flex-wrap:wrap; gap:0.75rem; }
.tile { width:220px; padding:0.75rem; border-radius:10px; box-shadow:var(--mud-elevation-1); cursor:pointer; background:var(--mud-palette-surface); color:var(--mud-palette-text-primary); }
.tile .title { font-weight:700; font-size:1.05rem; }
.tile .meta { font-size:0.88rem; color:var(--mud-palette-text-secondary); margin-top:0.25rem }
.state-title .count-chip { background:var(--mud-palette-primary); color:white; padding:2px 8px; border-radius:12px; font-size:0.75rem; margin-left:0.5rem; }

@media (max-width: 640px) {
  .tile { width: 100%; }
  .toolbar { flex-direction:column; align-items:stretch; }
}