/* Generated from ui/styles/ui-components.css. Edit the source, then npm run build:styles. */
@import url("./ui-motion.css");
@import url("./public-surfaces.css");
@import url("./public-patterns.css");
/* Catalog controls; public action buttons are owned by public-buttons.css. */

.ac-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--ui-border-default);
  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;
}

/* Cards: stable surface geometry */

.ac-card, .vr-song {
  position: relative;
  display: grid;
  overflow: hidden;
  border: var(--ui-border-default);
}

/* Modal content positioning; decoration belongs to surfaces-contract. */
.vr-pdf-options__dialog, .vr-guide__dialog { position:relative; }

/* 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);
}

/* 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); min-width:0;
}

/* 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,
  .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); }
}

/* Keyboard focus stays visible even on controls with local border resets. */
:focus-visible:not([role="option"]):not(:is(.ac-search input,.vr-search-field input)):not(:is(.button, .ad-button, .rep-button, .ep-button, .ad-pricing__button, .vr-toolbar-button, .vr-song__choice, .vr-sort__text, .offer-download, .address-map-dialog [data-confirm])) { outline: 2px solid var(--ui-color-accent) !important; outline-offset: -2px !important; }
.vr-pdf-option:has(input:focus-visible) { outline: 2px solid var(--ui-color-accent); outline-offset: -2px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 4000; padding: var(--ui-space-12) var(--ui-space-16); color: var(--ui-color-white); background: var(--ui-paint-d5c7af89ab); 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; }

.media-retry { display: block; min-height: var(--ui-space-44); margin: var(--ui-space-8) auto; padding: var(--ui-space-8); border: 1px solid var(--ui-color-line); border-radius: var(--ui-radius-control); background: var(--ui-color-surface); color: var(--ui-color-ink); font: inherit; cursor: pointer; }

/* Content shrinkage belongs to layout primitives, not a global overflow mask. */