/* Snapensnap control system: Headless UI-inspired states, native HTML semantics. */

:root {
  --ds-control-height-sm: 36px;
  --ds-control-height: 44px;
  --ds-control-height-lg: 52px;
  --ds-control-radius: 14px;
  --ds-control-radius-pill: 999px;
  --ds-control-bg: color-mix(in srgb, var(--text-primary) 8%, transparent);
  --ds-control-bg-hover: color-mix(in srgb, var(--text-primary) 12%, transparent);
  --ds-control-bg-active: color-mix(in srgb, var(--accent) 18%, transparent);
  --ds-control-border: color-mix(in srgb, var(--text-primary) 12%, transparent);
  --ds-control-border-hover: color-mix(in srgb, var(--text-primary) 22%, transparent);
  --ds-control-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --ds-focus-ring: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
  --ds-danger: #ff5c7a;
}

button,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}

.btn,
.app-store-links__item,
.platform-tab,
.platform-switcher__btn,
.pattern-lib-app-tabs__tab,
.pattern-lib-app-tabs__more,
.category-tab,
.pricing-periods__btn,
.app-page-action,
.preview-dialog__action,
.collection-create-dialog__btn,
.collection-unsave-dialog__btn,
.account-settings-dialog__avatar-remove,
.auth-figma__submit,
.auth-segment__btn,
.auth-figma__link,
.auth-otp__resend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-control-height);
  border: 1px solid var(--ds-control-border);
  border-radius: var(--ds-control-radius-pill);
  background: var(--ds-control-bg);
  color: var(--text-primary);
  font: 600 14px/20px var(--font);
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: var(--ds-control-shadow);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.btn:hover,
.app-store-links__item:hover,
.platform-tab:hover,
.platform-switcher__btn:hover,
.category-tab:hover,
.pricing-periods__btn:hover,
.app-page-action:hover,
.preview-dialog__action:hover,
.collection-create-dialog__btn:hover,
.collection-unsave-dialog__btn:hover,
.account-settings-dialog__avatar-remove:hover,
.auth-figma__submit:hover:not(:disabled),
.auth-segment__btn:hover,
.auth-figma__link:hover,
.auth-otp__resend:hover:not(:disabled) {
  border-color: var(--ds-control-border-hover);
  background: var(--ds-control-bg-hover);
  transform: translateY(-1px);
}

.pattern-lib-app-tabs__tab:hover,
.pattern-lib-app-tabs__more:hover {
  border-color: var(--ds-control-border-hover);
  background: var(--ds-control-bg-hover);
  transform: none;
}

.btn:focus-visible,
.app-store-links__item:focus-visible,
.platform-tab:focus-visible,
.platform-switcher__btn:focus-visible,
.pattern-lib-app-tabs__tab:focus-visible,
.pattern-lib-app-tabs__more:focus-visible,
.category-tab:focus-visible,
.pricing-periods__btn:focus-visible,
.app-page-action:focus-visible,
.preview-dialog__action:focus-visible,
.collection-create-dialog__btn:focus-visible,
.collection-unsave-dialog__btn:focus-visible,
.account-settings-dialog__avatar-remove:focus-visible,
.auth-figma__submit:focus-visible,
.auth-segment__btn:focus-visible,
.auth-figma__link:focus-visible,
.auth-otp__resend:focus-visible,
input:focus-visible:not(.app-flow-tree__search-input):not(.search-modal__input),
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

.btn:disabled,
.btn[aria-disabled="true"],
.platform-tab:disabled,
.platform-switcher__btn:disabled,
.pattern-lib-app-tabs__tab:disabled,
.category-tab:disabled,
.app-page-action:disabled,
.preview-dialog__action:disabled,
.collection-create-dialog__btn:disabled,
.collection-unsave-dialog__btn:disabled,
.auth-figma__submit:disabled,
.auth-otp__resend:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
}

.btn.is-active,
.platform-tab.is-active,
.platform-switcher__btn.is-active,
.pattern-lib-app-tabs__tab.is-active,
.category-tab.is-active,
.pricing-periods__btn.is-active,
.auth-segment__btn.is-active,
[data-checked].btn,
[data-checked].platform-tab {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: var(--ds-control-bg-active);
  color: var(--text-primary);
}

.btn--primary,
.collection-create-dialog__btn--primary,
.auth-figma__submit {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-text);
}

.btn--primary:hover,
.collection-create-dialog__btn--primary:hover,
.auth-figma__submit:hover:not(:disabled) {
  border-color: transparent;
  background: var(--accent-hover);
  color: var(--accent-text);
}

.btn--ghost,
.collection-create-dialog__btn--ghost,
.collection-unsave-dialog__btn--ghost,
.auth-figma__link,
.auth-otp__resend {
  background: transparent;
}

.btn--tiny,
.btn--sm,
.collection-create-dialog__btn,
.collection-unsave-dialog__btn {
  min-height: var(--ds-control-height-sm);
  padding: 8px 14px;
  font-size: 13px;
  line-height: 18px;
}

.collection-unsave-dialog__btn--danger {
  border-color: color-mix(in srgb, var(--ds-danger) 42%, transparent);
  background: color-mix(in srgb, var(--ds-danger) 12%, transparent);
  color: var(--ds-danger);
}

.search input,
.gallery-search__control,
.search-global__input,
.admin-card input,
.admin-card select,
.admin-card textarea,
.dialog input,
.dialog textarea,
.dialog select,
.account-settings-dialog__field input,
.cabinet-ref-link input,
.cabinet-collection-create input,
.cabinet-collections-rename,
.collection-picker-dialog__create input,
.collection-create-dialog__field input,
.collection-create-dialog__field textarea,
.collection-create-dialog__field select,
.auth-figma__input,
.auth-otp__input,
input[type="text"]:not(.app-flow-tree__search-input):not(.search-modal__input),
input[type="email"],
input[type="password"],
input[type="search"]:not(.app-flow-tree__search-input):not(.search-modal__input),
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
  border: 1px solid var(--ds-control-border);
  border-radius: var(--ds-control-radius);
  background: color-mix(in srgb, var(--bg-elevated) 86%, var(--text-primary) 4%);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary);
}

input:focus:not(.app-flow-tree__search-input):not(.search-modal__input),
textarea:focus,
select:focus,
.gallery-search__control:focus-within,
.search-global__input:focus-within,
.app-flow-tree__search:focus-within,
.search-modal__search:focus-within {
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

/* Иконка + поле — один контрол: кольцо фокуса на обёртке, не на input */
.app-flow-tree__search-input:focus,
.app-flow-tree__search-input:focus-visible,
.search-modal__input:focus,
.search-modal__input:focus-visible {
  border-color: transparent;
  outline: none;
  box-shadow: none;
}

.dialog,
.preview-dialog,
.account-settings-dialog__box,
.collection-picker-dialog__box,
.collection-create-dialog__box,
.collection-unsave-dialog__box {
  border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--bg-elevated) 94%, var(--text-primary) 3%);
  color: var(--text-primary);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
}

.dialog.dialog--auth {
  border: 0;
  border-radius: 32px;
  background: transparent;
}

.auth-figma {
  border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
  border-radius: 32px;
  background: color-mix(in srgb, var(--bg-elevated) 94%, var(--text-primary) 3%);
  color: var(--text-primary);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
}

.auth-segment {
  padding: 4px;
  border: 1px solid var(--ds-control-border);
  border-radius: var(--ds-control-radius-pill);
  background: color-mix(in srgb, var(--text-primary) 7%, transparent);
}

.auth-figma .auth-segment__btn {
  min-height: 36px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--ds-control-radius-pill);
  box-shadow: none;
}

.auth-segment__indicator {
  border-radius: var(--ds-control-radius-pill);
  background: color-mix(in srgb, var(--bg-elevated) 88%, var(--text-primary) 6%);
  box-shadow: var(--ds-control-shadow);
}

.auth-figma__submit {
  width: 100%;
  min-height: var(--ds-control-height-lg);
}

.auth-figma__link,
.auth-otp__resend {
  min-height: 36px;
  border-color: transparent;
  box-shadow: none;
}

.dialog::backdrop,
.preview-dialog::backdrop,
.account-settings-dialog::backdrop,
.collection-picker-dialog::backdrop,
.collection-create-dialog::backdrop,
.collection-unsave-dialog::backdrop {
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(10px);
}

.ui-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 26px;
  padding: 3px;
  border: 1px solid var(--ds-control-border);
  border-radius: var(--ds-control-radius-pill);
  background: var(--ds-control-bg);
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.ui-switch::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  transform: translateX(0);
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    background 160ms ease;
}

.ui-switch[data-checked],
.ui-switch.is-active,
.ui-switch[aria-checked="true"] {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--accent);
}

.ui-switch[data-checked]::before,
.ui-switch.is-active::before,
.ui-switch[aria-checked="true"]::before {
  background: var(--accent-text);
  transform: translateX(18px);
}

.ui-field {
  display: grid;
  gap: 8px;
}

.ui-field__label {
  color: var(--text-secondary);
  font: 600 13px/18px var(--font);
}

.ui-field__description {
  margin: 0;
  color: var(--text-tertiary);
  font: 400 12px/16px var(--font);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .app-store-links__item,
  .platform-tab,
  .platform-switcher__btn,
  .pattern-lib-app-tabs__tab,
  .category-tab,
  .app-page-action,
  .preview-dialog__action,
  .ui-switch,
  .ui-switch::before {
    transition: none;
  }
}