/* Shared controls are loaded after page styles so touch sizing stays consistent. */
:root {
  --text-small: .875rem;
  --space-large: 1.5rem;
  --status-public: #175a2a;
  --status-public-bg: #dcefe1;
  --status-private: #4d5052;
  --status-private-bg: #e2e2e0;
}

.ui-icon {
  display: inline-block;
  flex: 0 0 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: middle;
  background: currentColor;
  mask: var(--icon) center / contain no-repeat;
}
.icon-search { --icon: url('../assets/icons/lucide/search.svg'); }
.icon-map { --icon: url('../assets/icons/lucide/map.svg'); }
.icon-list { --icon: url('../assets/icons/lucide/list.svg'); }
.icon-map-pin { --icon: url('../assets/icons/lucide/map-pin.svg'); }
.icon-tags { --icon: url('../assets/icons/lucide/tags.svg'); }
.icon-x { --icon: url('../assets/icons/lucide/x.svg'); }
.icon-chevron-up { --icon: url('../assets/icons/lucide/chevron-up.svg'); }
.icon-chevron-down { --icon: url('../assets/icons/lucide/chevron-down.svg'); }
.icon-link { --icon: url('../assets/icons/lucide/link.svg'); }
.icon-arrow-left { --icon: url('../assets/icons/lucide/arrow-left.svg'); }

body select {
  appearance: none;
  padding-right: 2.25rem !important;
  background-color: #fff;
  background-image: url('../assets/icons/lucide/chevron-down.svg') !important;
  background-position: right .65rem center !important;
  background-size: 1rem !important;
  background-repeat: no-repeat !important;
  border-radius: 0;
}
.status-tag {
  display: inline-block;
  padding: .2rem .5rem;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--status-private);
  background: var(--status-private-bg);
}
.status-tag.is-public { color: var(--status-public); background: var(--status-public-bg); }
.status-tags { display: flex; flex-wrap: wrap; gap: var(--space-small); }
.skip-link:not(:focus) { clip-path: inset(50%); }

@media (pointer: coarse), (max-width: 720px), (max-height: 500px) {
  body input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
  body select, body textarea { font-size: max(1rem, 16px) !important; }
  body button, body .btn { min-height: 44px; }
}
@media (forced-colors: active) {
  .ui-icon { background: CanvasText; forced-color-adjust: none; }
  body select { appearance: auto; background-image: none !important; }
  .status-tag { border: 1px solid CanvasText; }
}