/* Small visual/interaction fixes layered after the main kawaii theme. */

/* The active tab used a wide glow inside a horizontally scrolling container.
   Mobile browsers clip that glow into a visible rectangle, so keep the shine
   tight to the pill instead. */
.region-tab.is-active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 6px 16px rgba(173, 105, 191, .16) !important;
}

.region-tab:focus { outline: none; }
.region-tab:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, white 20%);
  outline-offset: 2px;
  border-radius: 999px;
}

/* Keep portraits/outfits anchored toward the top of news thumbnails. */
.card-image {
  object-position: center top !important;
}

/* Thumbnails now open the in-app image viewer instead of the source page. */
.card-image-link {
  cursor: zoom-in;
}
.card-image-link:focus { outline: none; }
.card-image-link:focus-visible .card-image-wrap {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--accent) 58%, transparent);
}

/* Use the real app icon in the header instead of the old decorative glyph. */
.brand-mark-logo {
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  background: none !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(122, 94, 184, .18), 0 0 20px rgba(232, 123, 196, .16) !important;
}
.brand-mark-logo::after { display: none !important; }
.brand-mark-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Viewer sizing intentionally lives only in x-image-size.css now. Keeping a
   single authoritative override avoids Android/PWA cascade conflicts. */