/* Shared sizing utilities for inline vector icons used across the site. */

.duskline-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.ui-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.125em;
  overflow: visible;
}
.ui-icon--label {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  opacity: 0.92;
}
.ui-icon--check {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  display: block;
}
.ui-icon--close {
  width: 16px;
  height: 16px;
  display: block;
  margin: 0;
  flex-shrink: 0;
}
/* Retained hooks for older decorative icon slots; the duskline logo is a separate asset. */
.ui-icon--sparkle,
.ui-icon--brand {
  /* legacy classes — unused after Phase 1 brand restore */
  display: none;
}
.ui-icon--chevron {
  width: 1em;
  height: 1em;
  opacity: 0.75;
}
.ui-icon--nav {
  width: 18px;
  height: 18px;
  display: block;
}
.ui-icon--hero {
  width: 1em;
  height: 1em;
  display: block;
}
.ui-icon--star {
  width: 12px;
  height: 12px;
  display: block;
  fill: currentColor;
  stroke: none;
}

/* Settings / pills already use flex — keep icon + label aligned */
.settings-group-label .ui-icon--label {
  color: var(--accent-1);
}
.pill-check .ui-icon {
  display: block;
}

/* Phase 4 keepers: practical + seasons/culture/tips card icons */
.prac-icon .ui-icon--prac {
  width: 2.25rem;
  height: 2.25rem;
  display: block;
  color: currentColor;
}
.ui-icon--season,
.ui-icon--culture,
.ui-icon--tip {
  display: block;
  color: currentColor;
  stroke-width: 1.75;
}
.tools-hub-icon svg {
  width: 28px;
  height: 28px;
  display: block;
  stroke-width: 1.75;
}
.dest-arrow .ui-icon {
  width: 14px;
  height: 14px;
  display: block;
}

/* Destination rating stars as SVG */
.dest-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  color: var(--accent-1);
  font-size: 0; /* hide any leftover glyph */
  line-height: 0;
}
.dest-star .ui-icon--star {
  width: 12px;
  height: 12px;
}
.dest-star.half {
  position: relative;
  color: rgba(255, 255, 255, 0.28);
}
.dest-star.half .ui-icon--star-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  color: var(--accent-1);
}
.dest-star.half .ui-icon--star-fill .ui-icon--star {
  width: 12px;
  height: 12px;
}

/* Brand mark (✦) + tags — text only after Phase 1 */
.region-tag,
.dest-tag {
  display: inline-flex;
  align-items: center;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  white-space: nowrap;
}
.gallery-app-mark:not(.gallery-app-mark-svg) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05em;
  line-height: 1;
}

/* Tools hub chevron */
.tools-hub-chevron .ui-icon {
  width: 16px;
  height: 16px;
  display: block;
}

/* Modal / lightbox close already sized by button; ensure SVG centers */
.modal-close .ui-icon,
.settings-close .ui-icon,
.lightbox-close .ui-icon,
.weather-sheet-close .ui-icon {
  pointer-events: none;
}

/* Gallery empty / decode placeholder */
.ph-icon .ui-icon {
  width: 2rem;
  height: 2rem;
  opacity: 0.55;
}

/* Learn-more trailing chevron (optional inline) */
.prac-more .ui-icon--chevron {
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.15em;
  opacity: 0.85;
}