/* Generated from ui/styles/ui-components.css. Edit the source, then npm run build:styles. */
/* Buttons: shared base; dimensions and interaction variants stay local */

.ac-control, .ad-button, .rep-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ui-color-line);
  border-radius: var(--ui-radius-control);
}

/* Inputs: borderless search text */

.ac-search input, .vr-search-field input {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: var(--ui-color-ink);
  background: transparent;
  border: 0;
  outline: none;
}

/* Badges: artist tags */

.ad-tags span, .ac-card__tags button {
  display: inline-flex;
  align-items: center;
  color: var(--ui-color-muted);
  background: var(--ui-color-soft);
  border: 1px solid rgba(17,17,15,.22);
  border-radius: var(--ui-radius-pill);
  font-size: var(--ui-font-size-12);
  font-weight: var(--ui-font-weight-500);
}

/* Cards: stable surface geometry */

.ac-card, .vr-song {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--ui-color-line);
}

/* Modal surfaces */

.ep-dialog, .vr-pdf-options__dialog, .vr-guide__dialog {
  background: var(--ui-color-paper);
}

/* Modal shadow */

.vr-pdf-options__dialog, .vr-guide__dialog {
  position: relative;
  box-shadow: var(--ui-shadow-modal);
}

/* Loading placeholders: preserve static fallback appearance */

.ac-card__placeholder, .ad-gallery__placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--ui-color-muted);
  font-weight: var(--ui-font-weight-500);
}

/* Loading spinners */

.ac-loader, .ad-loader, .vr-loader {
  width: var(--ui-loader-size);
  height: var(--ui-loader-size);
  flex: 0 0 var(--ui-loader-size);
  border: var(--ui-loader-stroke) solid var(--ui-loader-track);
  border-top-color: var(--ui-color-ink);
  border-radius: var(--ui-radius-round);
  animation: ui-spin var(--ui-loader-duration) linear infinite;
}

@keyframes ui-spin {
  to { transform: rotate(360deg); }
}

/* Containers: shared width and centering */

.container, .ac-container, .ad-container, .rep-container {
  width: min(100%, calc(var(--ui-container-width) + var(--ui-current-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--ui-current-gutter);
}

/* Touch controls share a minimum target; decorative icons retain their size. */
@media (max-width: 600px) {
  body :is(.brand, .ac-brand, .ad-brand, .rep-brand,
  .menu-button, .ac-header__back, .ad-header__back, .rep-header__back,
  .ac-header__section, .rep-header__section, .utility-header__back,
  .vr-toolbar-button, .vr-sort__text, .vr-song__choice,
  .ac-card__tags button, .ac-card__category, .address-map-open, .address-map-heading button,
  .ac-popover__head button, .vr-menu-reset,
  .ac-footer a, .ad-footer a, .rep-footer a, .utility-footer a,
  .contact-dialog__close, .vr-pdf-options__close) {
    min-height: var(--ui-space-44);
    min-width: var(--ui-space-44);
  }
  .brand, .ac-brand, .ad-brand, .rep-brand, .utility-header__back,
  .ac-footer a, .ad-footer a, .rep-footer a, .utility-footer a {
    display: inline-flex;
    align-items: center;
  }
  .ac-search input, .vr-search-field input { min-height: var(--ui-space-44); font-size: var(--ui-font-size-16); }
}

/* Keyboard focus stays visible even on controls with local border resets. */
:focus-visible { outline: 2px solid #2457ff !important; outline-offset: -2px !important; }
.vr-pdf-option:has(input:focus-visible) { outline: 2px solid #2457ff; outline-offset: -2px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 4000; padding: 12px 16px; color: #fff; background: #1741cd; transform: translateY(-180%); }
.skip-link:focus { transform: none; }

.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; margin: -1px !important; padding: 0 !important; clip: rect(0 0 0 0) !important; border: 0 !important; white-space: nowrap !important; }

.seo-breadcrumbs { max-width: var(--ui-container-width); margin: 0 auto; padding: var(--ui-space-12) var(--ui-container-gutter); font-size: var(--ui-font-size-13); color: var(--ui-color-muted); }
.seo-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-8); list-style: none; margin: 0; padding: 0; }
.seo-breadcrumbs li { display: inline-flex; align-items: center; gap: var(--ui-space-8); }
.seo-breadcrumbs li + li::before { content: "/"; }
.seo-breadcrumbs a { display: inline-flex; min-height: var(--ui-space-44); align-items: center; text-decoration: underline; text-underline-offset: 3px; }